@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  src: url(../Fonts/static/PlusJakartaSans-Light.ttf);
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  src: url(../Fonts/static/PlusJakartaSans-Regular.ttf);
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  src: url(../Fonts/static/PlusJakartaSans-Bold.ttf);
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

body {
  background: #F5F5F5;
  color: #141414;
  font: normal normal 300 16px/30px Plus Jakarta Sans;
}

a {
  color:#141414;
  font-weight: bold;
}

p {
  margin-bottom: 28px;
  max-width: 700px;
  word-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
}

hr {
  border: none;
  border-top: 1px solid #141414;
  max-width: 700px;
  margin: 30px;
  margin-left: 0;
}

.noOverflow {
  position:fixed;
  width:100%;
  overflow-y: scroll;
}

.containerInner, .frame-layout-0 {
  max-width: 1050px;
  padding: 0 10px;
  margin: 0 auto;
  position:relative;
}

.frame-layout-0 .containerInner, .containerInner .frame-layout-0, .frame-layout-0 .frame-layout-0, .containerInner .containerInner {
  padding: 0;
}

.containerOuter, .frame-layout-1 {
  max-width: 1280px;
  margin: 0 auto;
}

#page-beratung {
  background: #75D3C2;
}

#page-beratung p.lead, #page-fortbildungen p.lead, #page-veranstaltungen p.lead, #page-faq p.lead {
  max-width: 737px;
}

#page-fortbildungen {
  background: #F5DE66;
}

#page-selbstlernen, #page-selbstlernenset-preview {
  background: #FF572D;
}

#page-selbstlernen p.lead {
  max-width: 854px;
}

#page-veranstaltungen {
  background: #BAB9B9;
}

strong {
  font-weight: bold;
}

header#websiteHeader {
  background-color: #fff;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}

#logo {
  display:block;
  margin: 0 auto;
  padding-top: 37px;
  width: 188px;
}

#logo img {
  width: 100%;
  height: auto;
}

#signet {
  float: left;
  margin-top: 26px;
  height: 47px;
  width: auto;
}

#toggleMenu {
  display:none;
}

#menuIcon {
  float:right;
  cursor:pointer;
  margin-top: 40.5px;
}

#closeMenuIcon {
  float: right;
  cursor:pointer;
  margin-top:28px;
  margin-right: 9px;
}

#toggleMenu:checked ~ nav {
  display: block;
}

#seitenSucheWrapper {
  margin-top: 87px;
  margin-bottom: 80px;
}

#seitenSucheWrapper button {
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 20px;
  float: right;
  margin-top: 13px;
}

.feldOutline :focus-visible {
    outline: none;
}

.seitenSucheOutline.feldOutline {
  outline: none;
  background: none;
  display: inline-block;
  padding:0;
  margin-left: -28px;
}

#seitenSuchfeld {
  background: none;
  font: normal normal bold 16px/20px Plus Jakarta Sans;
  color: #141414;
  padding: 20px 32px;
  border:none;
}

#seitenSuchfeld::placeholder {
  font: normal normal bold 16px/20px Plus Jakarta Sans;
  letter-spacing: 3.2px;
  color: #FFFFFF;
  text-transform: uppercase;
}

.tx-indexedsearch-info {
  display: none;
}

.tx-indexedsearch-percent {
  display: none;
}

nav#headerNav {
  display: none;
  position: fixed;
  z-index: 999;
  right: 0;
  top: 0;
  bottom: 0;
  left: 65%;
  background-color: #F5DE66;
  padding-left: 106px;
  padding-right: 44px;
  overflow-y: auto;
}

nav#headerNav  a, #footerNav a {
  font: normal normal 300 30px/45px Plus Jakarta Sans;
  text-decoration: none;
  color: #141414;
}

nav#headerNav a:hover, #footerNav a:hover {
  font-weight: bold;
}

nav#headerNav  ul {
  margin-bottom: 40px;
}

.headerWrapper {
  position: relative;
}

#contentWrapper {
  padding-top: 100px;
  position: relative;
  overflow: hidden;
}

.frame-space-before-medium {
  margin-top: 45px;
}

.frame-space-after-medium {
  margin-bottom: 45px;
}

h2 {
  font: normal normal bold 30px/40px Plus Jakarta Sans;
  margin-bottom: 60px;
  word-break: break-word;
}

h1.lead {
  margin-bottom: 47px;
  font: normal normal bold 15px/25px Plus Jakarta Sans;
  text-transform: uppercase;
  margin-top: 109px;
  letter-spacing: 3.75px;
}

p.lead {
  font: normal normal 300 50px/65px Plus Jakarta Sans;
  margin-bottom: 230px;
  max-width: 1035px;
}

.lead a {
  text-decoration: none;
  color: #141414;
  position:relative;
  padding: 3px 2px;
  font-weight: inherit;
  z-index: 200;
}

.lead a::after {
  content: '';
  position: absolute;
  left:0;right:0;top:60%;bottom:0;
  z-index:-1;
  transition: top 0.2s;
}

.lead .button {
  margin-top: 75px;
}

a.beratung::after {
  background: #75D3C2;
}

a.fortbildung::after {
  background: #F5DE66;
}

a.selbstlernen::after {
  background: #FF572D;
}

a.veranstaltungen::after {
  background: #BAB9B9;
}

a:hover::after {
  top:13%;
}

a.button, button.button {
  position: relative;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  border: 1px solid #141414;
  padding: 19px 55px;
  display:inline-block;
  color: #141414;
  text-decoration: none;
  font: normal normal bold 16px/22px Plus Jakarta Sans;
}

button.button {
  cursor:pointer;
}

a.button:hover, button.button:hover {
  background: #F5F5F5;
}

.button.small {
  padding: 10px 20px;
  padding: 7px 15px;
  font-weight: normal;
}

#page-home a.button:hover, #page-faq a.button:hover, #page-kontakt a.button:hover {
  background: #fff;
}

#page-impressum p {
  margin-bottom: 15px;
}

a.button.extern::after {
  position: absolute;
  right:-13px;
  top:-3px;
  display:block;
  width:30px;
  height:27px;
  background: url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/pfeil_externer_link.svg');
  content:'';
}

.lead a.button.extern::after {
  left: unset;
  buttom: unset;
  z-index: unset;
}

.newsletter-anmeldung {
  margin-bottom: 220px;
}

.newsletter-anmeldung p.lead {
  margin-top: 270px;
  margin-bottom: 70px;
}

.newsletter-anmeldung .kleingedrucktes {
  margin-top: 45px;
  font: normal normal 300 12px/20px Plus Jakarta Sans;
}

.feldOutline.emailInput {
  display:inline-block;
  padding: 0;
  width: 70%;
  max-width: 600px;
}

.emailInput input {
  background: none;
  font: normal normal 300 12px/20px Plus Jakarta Sans;
  color: #141414;
  padding: 20px 32px;
  border: none;
  width: 100%;
}

.emailInput input::placeholder {
  color: #141414;


}

#newsletterButton button {
  top: 1px;
}

#newsletterButton button:hover {
  background: #F5DE66;
}

#newsletterButton {
  display: inline-block;
  margin-left: 22px;
}

#page-kontakt .newsletter-anmeldung p.lead {
  margin-top:0;
}

#page-selbstlernen .newsletter-anmeldung p.lead, #page-selbstlernenjugendbw-impuls .newsletter-anmeldung p.lead {
  margin-top: 100px;
}

#angebote {
  margin-bottom: 240px;
}

#angebote h2 {
  margin-top: 165px;
  margin-bottom: 110px;
}

#angebote .angebot {
  /* height: 300px; */
}

#angebote a {
  display: block;
  text-decoration: none;
}

#angebote .angebot {
  padding:5px;
}

#angebote .beratung a {
  background-color: #75D3C2;
}
#angebote .fortbildungen a {
  background-color: #F5DE66;
}
#angebote .selbstlernen a {
  background-color: #FF572D;
}
#angebote .veranstaltungen a {
  background-color: #BAB9B9;
}

#angebote span {
  margin-left: 39px;
  font: normal normal bold 30px/20px Plus Jakarta Sans;
  color: #F5F5F5;
}

#angebote .angebotIcon {
  width: 300px;
  height: 300px;
  max-width: 100%;
  margin: 0 auto;
}

#angebote .angebotPfeil {
  width: 100px;
  height: 100px;
  float: right;
  margin-right: 24px;
}

.angebotFooter {
  line-height: 100px;
}

.bgLottie {
  z-index: -1;
  position:absolute;
  max-width: 100%;
}

.hoverEffects.bgLottie {
  z-index: 100;
}

#lottieHover-grafik_herz, #lottie-grafik_herz  {
  right: 0;
  top: 480px;
  width:604px;
  height:604px;
}

#lottieHover-grafik_selbstlernen, #lottie-grafik_selbstlernen  {
  right: -20px;
  top: -22px;
  width: 288px;
  width: 450.72px;
  height: 360px;
  height: 563.4px;
}

#lottieHover-grafik_beratung, #lottie-grafik_beratung {
  width:460px;
  height:434px;
  right: -7px;
  top: 113px;
}

#lottieHover-grafik_fortbildungen, #lottie-grafik_fortbildungen {
  width:316px;
  width:464.52px;
  height:384px;
  height:564.48px;
  right:0;
  top:18px;
}

#lottieHover-grafik_veranstaltungen, #lottie-grafik_veranstaltungen {
  width:456px;
  width:492.48px;
  height:422px;
  height:455.76px;
  right: -20px;
  top: 49px;
}

#lottieHover-grafik_fragezeichen, #lottie-grafik_fragezeichen {
  width:366px;
  width:431.88px;
  height:482px;
  height:568.76px;
  right: 67px;
  top: -20px;
}

.zweiSpaltenLinks {

}

.zweiSpalten-50-50 > div, .zweiSpalten-60-40 > div {
    float:left;
    width: 50%;
    box-sizing: border-box;
}

.zweiSpalten-60-40 > div.links {
    width: 60%;
    padding-right: 50px;
}

.zweiSpalten-60-40 > div.rechts {
    width: 40%;
    padding-left: 10px;
}

#videoSelbstlernenExplainer {
  width: 100%;
  height: auto;
  margin-top: 106px;
}

#veranstaltungenWrapper {
  margin-top: 50px;
  margin-bottom: 250px;
}

.aufklapperListe {
  margin-top: 45px;
  margin-bottom: 45px;
}

.aufklapper-head {
  cursor: pointer;
}

.aufklapper-head a {
  text-decoration: none;
}

.aufklapper-content {
  display:none;
  margin-top:30px;
}

.veranstaltung, .faq-element, .aufklapper {
  border-top: 1px solid #141414;
  padding: 20px 0;
  padding-right: 30px;
}

.veranstaltung:last-child, .faq-element:last-child, .aufklapper:last-child {
  border-bottom: 1px solid #141414;
}

.veranstaltungAusklappen, .faqAusklappen, .ausklappen {
  float: right;
}

.faqAusklappen, .ausklappen {
  position: relative;
  top: 3px;
}

.veranstaltung .headline {
  cursor: pointer;
  scroll-margin-top: 150px;
}

.veranstaltung .headline:hover {
  font-weight: bold;
}

.veranstaltung .beschreibung {
  display: none;
}

.veranstaltung span {
  border-right: 1px solid #141414;
  padding-right: 10px;
  margin-right: 10px;
}

.veranstaltung span:last-child {
  border-right: none;
  padding-right: 10px;
  margin-right: 0;
}

.veranstaltung.active .veranstaltungAusklappen, .faq-element.active .faqAusklappen, .aufklapper.active .ausklappen  {
  transform: rotate(-90deg);
}

.faq-container {
  /* margin-top: 100px; */
  width: 100%;
  max-width: 700px;
}

.faq-container-wrapper {
  margin-top:100px;
  margin-bottom:100px;
}

.faq-container h2 {
  margin-bottom: 50px;
}

.faq-container.rechts {
  float:right;
}

.faq-element a.headline {
  font: normal normal 300 16px/30px Plus Jakarta Sans;
  text-decoration: none;
  color: #141414;
}

.faq-element a.headline:hover, .faq-element.active a.headline {
  font-weight: bold;
}

.faq-element .inhalt {
  margin-top: 48px;
  display: none;
}

footer.containerOuter {
  border-top: 1px solid #141414;
  padding-top: 78px;
  margin-top: 100px;
  margin-bottom: 30px;
}

#footerInsta {
  position: absolute;
  right: 0;
  bottom: -5px;
}

#footerNav {
  min-width: 250px;
  float: right;
}

#footerFoerderungText {
  margin-top: 45px;
  max-width: 500px;
  margin-bottom: 75px;
  font: normal normal 300 12px/20px Plus Jakarta Sans;
}

#logoMinisterium {
  width: 240px;
  margin-top: 4px;
}

#footerLogos {
  float:left;
  margin-bottom: 150px;
}

#foerderungLogos img {
  float:left;
}

#foerderungLogos img:first-child {
  float:left;
  margin-right: 80px;
}

#footerLinksUndCopyright {
  font: normal normal bold 10px/12px Plus Jakarta Sans;
  letter-spacing: 1.2px;
}

#footerLinksUndCopyright a {
  text-transform: uppercase;
  text-decoration: none;
  color: #141414;
}

#footerLinksUndCopyright li {
  float:left;
  border-right: 1px solid #141414;
  padding-right: 10px;
  margin-right: 10px;
}

#footerLinksUndCopyright li:last-child {
  border-right: none;
  margin-right: 0;
}

#footerContact {
  margin-top: 35px;
}

#footerContact a {
  float:left;
  margin-right: 15px;
  display:inline-block;
}

a.iconLink img {
  display:block;
}

a.iconLink img.hover {
  display:none;
}

a.iconLink:hover img {
  display:none;
}

a.iconLink:hover img.hover {
  display:block;
}

.tabNavigationTabs {
  /* border-bottom: 1px solid #141414; */
}

.tabsWrapper {
  position: relative;
}

.tabNaviBackground {
  position:absolute;
  width:50%;
  left:0;
  right:50%;
  background:#f5f5f5;
  border-bottom: 1px solid #141414;
  height:calc(100% - 1px);
  z-index: -1;
}

.tabNaviBackground.active, .tabNaviBackground.hover {
  background: #fff;
  border-bottom: 1px solid #fff;
}

.tabNaviBackground.rechts {
  left:50%;
  right:0;
}

.tabNavigationTabs li {
  position: relative;
  background: #F5F5F5;
  width: 25%;
  float: left;
  display: block;
  border-right: 1px solid #141414;
  border-bottom: 1px solid #141414;
  box-sizing: border-box;
}

.tabNavigationContainer.tabs5 .tabNavigationTabs li {
  width: 20%;
}

.tabNavigationTabs > li {
  min-height: 88px; /* nur nötig, wenn ein Tab leer ist */
}

.tabNavigationTabs li:last-child {
  border-right: 1px solid #f4f4f4;
}

.tabNavigationTabs li:hover:last-child {
  border-right: 1px solid #fff;
}


.tabNavigationTabs li:hover, .tabNavigationTabs li.active {
  background: #fff;
  border-bottom: 1px solid #fff;
}

.tabNavigationTabs li.active {
  border-right: 1px solid #fff;
}

.tabNavigationTabs li.active + li {
  border-left: 1px solid #141414;
}

.tabNavigationTabs li.active + li:hover {
  border-left: 1px solid #fff;
}

.tabNavigationTabs li.active + li:nth-child(3):hover {
  border-left: 1px solid #141414;
}

.tabNavigationTabs li a {
  color: #141414;
  font: normal normal bold 16px/1.4 Plus Jakarta Sans;
  text-decoration: none;
  padding: 0 39px;
  display: block;
  outline:none;
  height: 87px;
  display: flex;
  align-items: center;
}

.tabNavigationTabs li:hover .submenu {
  display: block;
  position: absolute;
  right: -1px;
  left: -1px;
  background: #fff;
  z-index: 10;
  border:1px solid #141414;
  border-top:none;
  padding-bottom: 20px;

}

.tabNavigationTabs li.active:hover .submenu {
  right: -2px;
}

.tabNavigationTabs .submenu li {
  float:none;
  width:auto;
  border:none;
  background:none;
}

.tabNavigationTabs .submenu li a {
  line-height: 35px;
  font-weight: normal;
}


.tabNavigationContent  {
  background: #fff;
  padding: 90px 0;
  display:none;
}

.tabNavigationContent.active {
  display: block;
}

.tabNavigationTabs ul.submenu {
  display: none;
}

#linkFilterWrapper {
  height: 142px;
}

#linkFilterWrapper > div {
  margin-bottom: 15px;
}

.filterComponent .selectHeader {
  text-transform: uppercase;
  font: normal normal bold 16px/20px Plus Jakarta Sans;
  letter-spacing: 3.2px;
  margin-right: 18px;
  word-break: break-word;
}

.filterComponent.selected .selectHeader {
  text-transform: none;
  font: normal normal bold 16px/20px Plus Jakarta Sans;
  letter-spacing: normal;
  margin-right: 30px;
  word-break: break-word;
}

.feldOutline {
  border: 1px solid #141414;
  border-radius: 30px;
  padding: 6px 32px;
  background: #fff;
}

#linkSuchfeldWrapper {
  width:394px;
  max-width: 100%;
  display: inline-block;
  line-height: 32px;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

#linkSuchfeldWrapper input[type=text] {
  border:none;
  padding:0;
  font: normal normal bold 16px/20px Plus Jakarta Sans;
  width: calc(100% - 46px);
  padding-right: 10px;
}

#linkSuchfeldWrapper input[type=text]::placeholder {
  text-transform: uppercase;
  letter-spacing: 3.2px;
  color: #9B9B9B;
}

#linkSuchfeldWrapper input[type=text]:focus {
  border:none;
  outline:none;
}

#linkSuchfeldWrapper button {
  background:none;
  border:none;
  cursor:pointer;
  float:right;
  padding:0;
  padding-top:3px;
  margin-right:-13px;
}

#clearSuchfeld {
  display: none;
  cursor:pointer;
}

#suchbegriffSuggest li {
  cursor:pointer;
}

#suchbegriffSuggest li:hover {
  text-decoration: underline;
}

#suchbegriffSuggest {
  overflow-y: auto;
  max-height:300px;
  margin-top: 10px;
  display:none;
}

.filterComponent {
  width: 293px;
  border: 1px solid #141414;
  border-radius: 30px;
  display: inline-block;
  vertical-align: top;
  padding: 12px 32px;
  background: #fff;
  position: relative;
  z-index: 10;
  cursor: pointer;
  box-sizing: border-box;
  margin-right: 10px;
}

.filterComponent.selected {
  background: #BAB9B9;
}

.filterComponent ul {
  max-height:0;
  overflow:hidden;
  /* transition: max-height 0.25s ease-in, margin-top 0.25s ease-in; */
  overflow-y: auto;
  padding-right: 20px;
  margin-right: -20px;
}

.filterComponent.hover ul {
  margin-top: 30px;
  max-height:300px;
  transition: max-height 0.15s ease-out, margin-top 0.15s ease-out;
}

/* .filterComponent.noHover:hover ul {
  margin-top:0;
  max-height:0;
} */

.filterComponent li {
  margin-bottom: 10px;
  line-height: 22px;
}

.filterComponent li:hover {
  text-decoration: underline;
}

.selectIcon, .selectIcon::after  {
  width: 15px;
  height: 2px;
  background: #141414;
  float: right;
  margin-top: 9px;
}

.selectIcon::after {
  margin-top:0;
  float:none;
  content: '';
  display:block;
  transform: rotate(-90deg) translatez(0);
  transition: transform 0.25s ease-in;
}

.filterComponent.hover .selectIcon::after {
  transform: rotate(0deg) translatez(0);
}

.filterComponent.selected .selectIcon {
  width: 12px;
  height: 12px;
  background: url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/icon_schliessen_15x15px.svg');
  padding: 9px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: -9px;
  margin-top: -4px;
  position: absolute;
  right: 33px;
}

.filterComponent.selected .selectIcon::after {
  display: none;
}

#resultListWrapper {
  display: none;
  margin-bottom: 165px;
}

#resultListWrapper .message {
  margin-bottom: 20px;
}

#resultList li {
  margin-bottom: 20px;
}

#resultList a {
  border-bottom: 1px solid #141414;
  text-decoration: none;
  font: normal normal 300 30px/45px Plus Jakarta Sans;
  color:#141414;
  margin-right: 10px;
}

#resultList .bereichName, #resultList .kachelName {
  font: normal normal bold 16px/22px Plus Jakarta Sans;
  color: #FF572D;
}

#resultList .bereichName {
  text-transform: uppercase;
}

#resultList .linkInfo {
  display:inline-block;
}

#kacheln {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.kachel {
  box-sizing: border-box;
  width: 400px;
  background: #F5F5F5;
  /* float: left; */
  padding-left: 100px;
  padding-bottom: 55px;
  margin: 0 5px;
  margin-bottom: 40px;
  cursor: pointer;
  scroll-margin-top: 150px;
}

.kachel.open {
  cursor: default;
}

.kachelClick {
  color: #141414;
  text-decoration: none;
  display:inherit;
}

.kachel h3 {
  font: normal normal bold 30px/40px Plus Jakarta Sans;
  clear: both;
  margin-bottom: 50px;
  margin-top: 200px;
}

.kachel.open h3 {
  clear: none;
  max-width: 80%;
  margin-top: 67px;
}

.kachel .kachelMargin {
  margin-left: 0;
  margin-right: 95px;
}


.kachel.open .kachelMargin {
  margin-left: 200px;
  margin-right: 120px;
}

.kachel .kachelBeschreibung {
  display:none;

}

.kachel.open .kachelBeschreibung {
  display:block;
}

.kachelLinks {
  display: none;
}

.kachel.open .kachelLinks {
  display: block;
}

.kachelLinks li {
  margin-bottom: 30px;
}

.kachelLinks a {
  text-decoration: none;
  font: normal normal 300 18px/26px Plus Jakarta Sans;
  letter-spacing: 0px;
  color: #141414;
  border-bottom: 1px solid #141414;
  margin-right: 30px;
}

.kachelLinks .quelle {
  font-size: 14px;
}

.kachelLinks .schlagworte, #resultList .schlagworte {
  display:none;
}

.kachelLinks .link, .kachelLinks .linkQuelle {
  margin-right: 40px;
}

.linkartIcon {
  float:right;
  width:24px;
  height:33px;
  background-image:url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/icon_link.svg');
  background-repeat: no-repeat;
  margin-left: 40px;
}

.linkartIcon.type-1 {
  width:28px;
  height:35px;
  background-image:url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/icon_download.svg');
  margin-right: -2px;
}

/* li:hover .linkartIcon.type-1 {
  width:29px;
  height:36px;
  background:url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/icon_download_hover.svg');
} */

.linkartIcon.type-2 {
  width:36px;
  height:22px;
  background-image:url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/icon_video.svg');
  margin-right: -6px;
}

/* li:hover .linkartIcon.type-2 {
  width:35px;
  height:21px;
  background:url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/icon_auge_hover.svg');
} */

.kachel h4.bereich {
  display:none;
  font: normal normal bold 15px/45px Plus Jakarta Sans;
  letter-spacing: 3.75px;
  color: #FF572D;
  text-transform: uppercase;
}

.kachel.open h4.bereich {
  display:block;
  float:left;
}

.kachelSchwerpunkte {
  display: block;
}

.kachelSchwerpunkte li {
  margin-bottom: 10px;
}

.kachel.open .kachelSchwerpunkte {
  display: none;
}

.kachel .roterPfeil {
  margin-top: 55px;
  width: 40px;
  height: 70px;
  float: left;
}

.kachel.open .roterPfeil {
  margin-right: 160px;
}

.kachel:hover .roterPfeil {
  margin-left: 11px;
}

.kachel.open:hover .roterPfeil {
  margin-left: 0;
}

.kachelClose {
  margin-top: 55px;
  width:60px;
  height:60px;
  background:url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/button_schliessen_60x60px.svg');
}

.kachelClose:hover {
  background:url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/button_schliessen_60x60px_hover.svg');
}

.kachel .kachelClose, .kachel .kachelBottomClose {
  float:right;
  display:none;
  margin-right: 40px;
}

a.button.kachelBottomClose:hover {
  background:#fff;
}

.kachel .kachelBgStufe {
  float:right;
}

.kachel.open .kachelClose, .kachel.open .kachelBottomClose {
  display:inline-block;
}

.kachel.open .kachelBgStufe {
  display:none;
}

.kachel.open {
  position: absolute;
  width: 100%;
  left:0;
  right:0;
}

.newsBox {
  float:left;
  margin: 20px;
}

.newsBox h3 {
  font: normal normal bold 25px/30px Plus Jakarta Sans;
  padding: 32px;
}

.newsBox .text {
  margin: 32px;
  font: normal normal 300 25px/30px Plus Jakarta Sans;
}

.newsBox .bild {
  max-width: 100%;
  height: auto;
}

#instagramLastPost {
  position: relative;
}

#instagramLastPost::after {
  display:block;
  content:'';
  position:absolute;
  bottom:20px;
  right:10px;
  background: url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/icon_social_media_weiss.svg');
  width:43px;
  height:43px;
  pointer-events: none;
}

.newsContainer > a:nth-child(1) .newsBox {
  margin-left: 100px;
  margin-left: 5vw;
  margin-top: 101px;
}

#instagramLastPost {
  margin-left: 212px;
  margin-left: 11vw;
}

.newsContainer > a:nth-child(3) .newsBox {
  margin-top: 120px;
}

.newsContainer > a:nth-child(4) .newsBox {
  margin-left: 220px;
  margin-left: 11.4vw;
  margin-top: 120px;
}

.newsContainer > a:nth-child(5) .newsBox {
  clear:left;
}

.newsContainer > a:nth-child(6) .newsBox {
  margin-left: 140px;
  margin-top: 60px;
}


.bgGelb {
  background: #F5DE66;
}
.bgCyan {
  background: #75D3C2;
}
.bgGrau {
  background: #BAB9B9;
}
.bgWeiss {
  background: #fff;
}
.bgRot {
  background: #FF572D;
}
.size293 {
  width: 293px;
  min-height: 293px;
}
.size394 {
  width: 394px;
  min-height: 394px;
}
.size596 {
  width: 596px;
  min-height: 394px;
}

.newsHoverButton {
  margin:30px;
  width:60px;
  height:60px;
  background: url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/button_weiter_60x60px.svg');
}

.newsBox:hover .newsHoverButton {
  width:60px;
  height:60px;
  background: url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/button_weiter_hover_60x60px.svg');
}

a .newsBox {
  cursor: pointer;
  text-decoration: none;
  color: #141414;
}

.ueberschriftLinks .links, .ueberschriftLinks .rechts {
  box-sizing: border-box;
  padding: 0px 10px;
}

.ueberschriftLinks .links {
  float:left;
  width: 36%;
  min-width: 240px;
  padding-left: 0;
}

.ueberschriftLinks .rechts {
  float:left;
  width: 64%;
}

.ueberschriftLinks {
  margin-bottom: 140px;
}

.kontaktInfos {
  max-width: 270px;
  float:left;
}

.kontaktBild {
  float:left;
  margin-top: -80px;
  min-height: 376px;
}

.kontaktWrapper:hover .kontaktBild .initial, .kontaktWrapper .kontaktBild .hover {
  display:none;
}

.kontaktWrapper:hover .kontaktBild .hover {
  display:inline-block;
}

.kontaktInfos a.emailText {
  text-decoration: none;
  color: #141414;
}

.kontaktInfos .emailButton, .kontaktInfos .phoneButton, #footerContact .iconLink {
    display: inline-block;
    width:60px;
    height:60px;
    background:url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/button_phone_60x60px.svg');
    margin-right: 14px;
}

.kontaktInfos .emailButton, #footerContact .emailButton {
    background:url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/button_mail_60x60px.svg');
}

.kontaktInfos .emailButton:hover, #footerContact .emailButton:hover {
    background:url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/button_mail_hover_60x60px.svg');
}

.kontaktInfos .phoneButton:hover, #footerContact .phoneButton:hover {
    background:url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/button_phone_hover_60x60px.svg');
}

body.lightGray .kontaktInfos .emailButton:hover, body.lightGray #footerContact .emailButton:hover {
    background:url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/button_mail_hover_60x60px_gelb.svg');
}

body.lightGray .kontaktInfos .phoneButton:hover, body.lightGray #footerContact .phoneButton:hover {
    background:url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/button_phone_hover_60x60px_cyan.svg');
}


body::after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1; // hide images
   content:url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/button_phone_hover_60x60px_cyan.svg') url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/button_mail_hover_60x60px_gelb.svg') url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/button_phone_hover_60x60px.svg') url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/button_mail_hover_60x60px.svg');   // load images
}

.kontaktInfos .kontaktDaten {
  margin-top: 20px;
  margin-bottom: 30px;
}

ul.redCheckmark li, .frame-type-text ul.redCheckmark li {

  background: url("/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/bullet_haken_rot.svg") no-repeat left 6px;
  padding: 3px 0px 3px 62px;

  list-style: none;
  margin: 0;
  margin-bottom: 12px;

}

.frame-type-text ul {
  max-width: 700px;
  margin-bottom: 45px;
}

.frame-type-text ul li, .veranstaltung ul li, .tool ul li {
  background: url("/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/bullet_pixel_rot.svg") no-repeat left 11px;
  padding: 0px 0px 0 20px;

  list-style: none;
  margin: 0;
  margin-bottom: 12px;
}

.tool .pro ul li {
  background-image: url("/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/bullet_pixel_gruen.svg")
}

.veranstaltung p {
  margin-bottom: 16px;
}

.sectionHintergrund {
    padding: 140px 0;
}

.sectionHintergrund .ueberschriftLinks:last-child, .sectionHintergrund .linkliste:last-child {
  margin-bottom: 0;
}

.sectionHintergrund.frame-layout-3 {
  background:#fff;
}

.sectionHintergrund.frame-layout-4 {
  background:#f5f5f5;
}

.linklisteWrapper {
  max-width: 700px;
  width: 100%;
  margin-bottom: 45px;
}

.linklisteWrapper.rechts {
  float: right;
}

.linklisteWrapper h3 {
  font-size: 20px;
  margin-bottom: 24px;
}

.linkliste {
  margin-bottom: 45px;
}

.linkliste .linkartIcon {
  height: 35px;
  background-position: 0 center;
}

.linkliste a {
  text-decoration: none;
  font-weight: normal;
  display: block;
}

.linkliste a:hover {
  /* text-decoration: underline; */
  font-weight: bold;
  /* border-bottom: 1px solid #141414; */
}

.linkliste li:first-child {
  border-top: 1px solid #141414;
}

.linkliste li {
  border-bottom: 1px solid #141414;
  padding: 18px 30px 15px 0;
}

.linkliste .linkText {
  display: inline-block;
  margin-right: 10px;
}

.linkliste .textWrap {
  display: inline-block;
  max-width: calc(100% - 70px);
}

.linkliste .linkInfo {
  display: inline-block;
  font: normal normal bold 16px/45px Plus Jakarta Sans;
  color: #FF572D;
}

.linkliste .linkQuelle {
  font: normal normal normal 14px/22px Plus Jakarta Sans;
  margin-bottom: 10px;
}

table {
  border-spacing: 10px 0;
  border-collapse: separate;
  margin-bottom: 80px;
}

table p {
  margin-bottom: 15px;
}

table .frame-type-text ul {
  margin-bottom: 15px;
}

table th {
  font: normal normal bold 14px/30px Plus Jakarta Sans;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  border-top: 2px solid #848484;
  border-bottom: 2px solid #848484;
  padding: 10px 0;
}

table td {
  border-bottom: 2px solid #848484;
  padding: 10px 0;
  padding-right: 20px;
}


table caption {
  font: normal normal bold 15px/25px Plus Jakarta Sans;
  text-transform: uppercase;
  letter-spacing: 3.75px;
  margin-bottom: 90px;
  text-align: left;
}

.text-center {
  text-align: center;
}

#c12162 { /* Technik Tabelle */
  margin-top: 190px;
  overflow-x: auto;
}

#c12162 table td { /* Technik Tabelle */

}

.toolSammlungWrapper {
  position: relative;
}

.toolSammlung.containerInner {
  position: initial;
}

.toolSammlung {
    background: #fff; /* Wieder löschen nur für Test */
}

.toolSammlung .kategorieName {
  float:left;
}

.toolSammlung .kategorieName, .tool h4 {

  width: 200px;
  font: normal normal bold 15px/25px Plus Jakarta Sans;
  letter-spacing: 3.75px;
  color: #141414;
  text-transform: uppercase;
  word-wrap: break-word;
  padding: 10px 10px 0 0;
  box-sizing: border-box;
}

.tool h4 {
  display: none;
  margin-top:180px;
}

.toolSammlung .toolRow {
  margin-bottom: 95px;
}

.toolsWrapper {
  width: calc(100% - 200px);
  margin-left: 200px;
}

.toolSammlung .tool {
  width: 192px;
  float: left;
  margin-right: 10px;
  margin-bottom: 30px;
}

.tool {
  cursor: pointer;
}

.tool.open .toolInner {
  padding-left:115px;
}

.tool.open {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: -180px;
  background: #F5F5F5;
  cursor: auto;
  z-index: 10;
}

.tool .toolLogo img {
  max-width: 90%;
  transition: all .1s ease-in-out;
}

.tool.open .toolLogo img {
  transition: none;
}

.tool:hover .toolLogo img {
  transform: scale(1.05);
}

.tool.open:hover .toolLogo img {
  transform: unset;
}


.tool.open .toolLogo {
  float:right;
  margin-right: 100px;
}

.tool.open .toolName, .tool.open .toolSubHead  {
  font-size: 30px;
  line-height: 40px;
  margin-right: 220px;
  max-width: 495px;
  box-sizing: border-box;
}

.tool .beschreibung {
  margin-top: 40px;
}

.tool .zielgruppe {
  margin-top: 40px;
  margin-bottom: 58px;
}

.tool.open .toolDetailMargin {
  padding-top: 180px;
  margin-left:200px;
}

.tool.open h4 {
  width: 200px;
  float:left;
  display: block;
  word-wrap: break-word;
}

.tool .review, .tool .proAndCon, .tool .zielgruppe, .tool .toolLinkButton, .tool .beschreibung {
  display:none;
}

.tool.open .review, .tool.open .proAndCon, .tool.open .zielgruppe, .tool.open .beschreibung {
  display: block;
  word-wrap: break-word;
}

.tool.open .toolLinkButton {
  display: inline-block;
}

.tool .proAndCon {
  margin-bottom: 30px;
}

.tool .proAndCon > div {
  float:left;
  width:50%;
  padding-right:10px;
  box-sizing: border-box;
  max-width: 293px;
}

.tool .proAndCon .headline {
  font-weight: bold;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  border-top: 2px solid #848484;
  border-bottom: 2px solid #848484;
  padding: 20px 0;
  line-height: 14px;
  font-size: 14px;
  margin-bottom: 30px;
}


.toolSammlung .toolName {
  font-weight: bold;
  padding-right: 10px;
  margin-top: 15px;
  text-decoration: none;
}

.toolSammlung .toolSubHead, .toolSammlung .toolName  {
  padding-left: 5px;
  padding-right: 10px;
}

.toolSammlung .toolLogo {
  width: 192px;
  height: 192px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolSammlung .tool.open .toolLogo {
  display:block;
}

.toolClose {
  margin-top: 55px;
  width:60px;
  height:60px;
  background:url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/button_schliessen_60x60px.svg');
}

.toolClose:hover {
  background:url('/typo3conf/ext/jugend_at_bw_theme/Resources/Public/Icons/button_schliessen_60x60px_hover.svg');
}

.tool .toolClose, .tool .toolBottomClose {
  float:right;
  display:none;
  margin-right: 40px;
}

.tool .toolBottomClose {
  margin-bottom: 55px;
}

a.button.toolBottomClose:hover, a.toolLinkButton:hover {
  background:#fff;
}

.tool.open .toolClose, .tool.open .toolBottomClose {
  display:inline-block;
}

#navInsta {
  margin-left: 239px;
}

@media (hover: none) {
  .lead a::after {
    top:13%;
  }
}

@media (max-width: 1300px) {
  .headerWrapper.containerOuter {
    padding: 0 10px;
  }

  nav#headerNav {
    left: unset;
  }

  #page-kontakt .zweiSpalten-50-50 > div {
    float: none;
    width: 100%;
  }

}

@media (max-width: 1300px)  and (min-width:860.01px) {
  .newsContainer > a:nth-child(3) .newsBox, .newsContainer > a:nth-child(5) .newsBox {
    margin-left: 20px;
  }
}

@media (max-width: 1120px) {

  #footerInsta {
    right: 30px;
  }

}

@media (max-width: 1000px) {

  .bgLottie {
    display: none;
  }

  .zweiSpalten-60-40 > div {
    float: none;
  }

  .zweiSpalten-60-40 > div.links {
      width: 100%;
      padding:0;
  }

  .zweiSpalten-60-40 > div.rechts {
      width: 100%;
      padding:0;
  }

  #videoSelbstlernenExplainer {
    max-width: 700px;
    margin-top: 0;
    margin-bottom: 45px;
  }

  .tabNavigationTabs li a {
    padding: 0 20px;
  }

  .tool.open .toolDetailMargin {
    margin-left: 0;
    padding-top: 70px;
  }

  .toolClose {
    margin-top:0;
  }

  .tool.open .toolName, .tool.open .toolSubHead {
    padding-left: 0;
  }

  .tool.open h4 {
    float: none;
  }

}


@media (max-width: 890px) {

  #newsletterButton {
    display: block;
    margin: 10px 0;
  }

}


@media (max-width: 860px) {

  .zweiSpalten-50-50 > div.links {
    margin-bottom: 45px;
  }

  .zweiSpalten-50-50 > div {
    float: none;
    width: 100%;
  }

  #contentWrapper .newsContainer a {
    text-decoration: none;
  }

  #contentWrapper .newsBox, #instagramLastPost {
    margin: 90px 30px;
    clear:both;
    float:none;
    max-width: calc(100% - 60px);
  }

  #footerNav {
    margin-bottom: 150px;
    float:none;
    clear:both;
  }

  #footerLogos {
    margin-bottom: 75px;
  }

  #foerderungLogos img, #foerderungLogos img:first-child {
    float: none;
    display: block;
    margin: 0 auto;
  }

  #foerderungLogos img:nth-child(2) {
    margin-top: 45px;
  }

}



@media (max-width: 860px) and (min-width:767.99px) {

  .tabNavigationTabs li:nth-child(1) a, .tabNavigationTabs li:nth-child(4) a {
    padding-left: 5px;
  }

  .tabNavigationTabs li:nth-child(2) a, .tabNavigationTabs li:nth-child(3) a {
    padding-left: 10px;
  }

}

@media (max-width: 767.98px) {

  .tool.open .toolLogo {
    margin-right: 0;
  }

  .tool.open .toolName, .tool.open .toolSubHead {
    margin-right: -35px;
  }

  .tool.open .toolInner {
    padding: 0 35px;
  }

  .tool .toolClose, .tool .toolBottomClose {
    margin-right: 0;
  }

  #resultList .linkInfo {
    display: block;
  }

  #resultList a {
    font-size: 20px;
    line-height: 30px;
  }

  .kachel.open {
    padding-left:35px;
  }

  .kachel.open .kachelMargin {
      margin-left: 0px;
      margin-right: 44px;
  }

  .kachel.open .kachelClick {
    margin-top: 180px;
    display: block;
  }

  .kachel.open .roterPfeil {
    margin-right: 0;
  }

  .kachel.open h4.bereich {
    float:none;
  }

  .feldOutline.emailInput {
    width: 100%;
  }

  #linkFilterWrapper {
    height: auto;
  }

  .hoverEffects.bgLottie {
    z-index: -1;
  }

  .ueberschriftLinks .links, .ueberschriftLinks .rechts {
    float: none;
    width: 100%;
  }


  .tabNavigationTabs li, .tabNavigationContainer.tabs5 .tabNavigationTabs li {
    width: 100%;
    float:none;
    border: 1px solid #141414;
    border-top: none;
  }

  .tabNavigationTabs li:last-child {
    border-right: 1px solid #141414;
  }

  .tabNavigationTabs li.active {
    border: 1px solid #141414;
  }

  .tabNavigationTabs li:hover .submenu {
    position: relative;
    border: none;
    right:0;
    left:0;
  }

  .tabNavigationTabs .submenu li:last-child {
    border-right: none;
  }

  .tabNavigationTabs > li:first-child, .tabNavigationTabs > li:first-child.active {
    border-top:1px solid #141414;
  }

  .tabNavigationTabs li.active {
    border-top:none;
  }

  nav#headerNav {
    left: 0;
    padding: 0 30px;
  }

  #angebote {
    padding: 0 30px;
  }

  #angebote span {
    margin-left: 20px;
  }

  #angebote .angebotPfeil {
    margin-right: 0;
  }

  .seitenSucheOutline.feldOutline {
    margin-left: 0;
  }

  #seitenSuchfeld {
    width: calc(100% - 110px);
    padding-right: 0;
  }

  .containerInner, .frame-layout-0 {
    padding: 0 35px;
  }

  .headerWrapper.containerOuter {
    padding: 0 35px;
  }

  .newsletter-anmeldung p.lead {
    margin-top: 210px;
  }

  /* .newsBox {
    max-width: 100%;
    margin: 0 !important;
  } */

  #logo {
    display: none;
  }

  p.lead {
    font: normal normal normal 30px/40px Plus Jakarta Sans;
  }

}

@media (max-width: 660px) {

  #page-kontakt .newsletter-anmeldung {
    margin-bottom: 90px;
  }

  .kontaktInfos {
    float: none;
    clear: both;
    margin: 0 auto;
    margin-top: -70px;
    margin-bottom: 30px;
    padding: 0 35px;
    text-align: center;
  }

  .kontaktBild {
    float: none;
    clear: both;
    margin-top: 0;
    text-align: center;
  }

  .ueberschriftLinks .kontaktBild {
    margin: 0 -35px;
  }

  #page-kontakt .zweiSpalten-50-50 h2 {
    margin-bottom: 0;
  }

}

@media (max-width: 620px) {
  .toolSammlung .tool.open .toolLogo {
    display: none;
  }

  .toolSammlung .kategorieName {
    float:none;
    margin-bottom: 20px;
    width: auto;
  }

  .toolsWrapper {
      width: 100%;
      margin-left: 0;
  }

  .tool .toolBottomClose {
    float: none;
    margin-top:30px;
  }

}

@media (max-width: 400px) {
  a.button, button.button {
    padding: 19px 35px;
  }
}

@media (hover: none) {
  .lead a::after {
    display:none;
  }
  a.beratung {
    background: linear-gradient(to top, #75D3C2 86%, transparent 0);
  }
  a.fortbildung {
    background: linear-gradient(to top, #F5DE66 86%, transparent 0);
  }

  a.selbstlernen {
    background: linear-gradient(to top, #FF572D 86%, transparent 0);
  }

  a.veranstaltungen {
    background: linear-gradient(to top, #BAB9B9 86%, transparent 0);
  }
}


.noSelect {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.noSelect:focus {
    outline: none !important;
}