/* ============================================
   TYPO3 Custom Styles: Wegweiser Arbeitsf�higkeit
   Namespace: ww- (Wegweiser)
   Bootstrap 5 kompatibel - keine Konflikte
   ============================================ */

/* Work Sans Font Import */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');

/* Root Variables */
:root {
  --ww-primary: #CC0837;
  --ww-beige: #F5F3EE;
  --ww-dark-gray: #4A4A49;
  --ww-darker-gray: #323232;
  --ww-text: #2C2C2C;
  --ww-blue: #005A9C;
  --ww-red: #CC0837;
  --ww-slate: #475569;
  --ww-teal: #0D9488;
  --ww-font: 'Work Sans', sans-serif;
}

/* ---- Global Overrides ---- */
body {
  font-family: var(--ww-font);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ww-text);
}

a {
  color: var(--ww-primary);
  text-underline-offset: 4px;
}

/* ---- Header / Top Navigation ---- */
.ww-header {
  z-index: 1050;
  font-family: var(--ww-font);
}

.ww-nav-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0 5px;
  font-size: 18px;
  font-weight: 500;
  color: var(--ww-primary);
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.2s;
}

.ww-nav-link:hover,
.ww-nav-link.active {
  background-color: #f3f4f6;
  color: var(--ww-primary);
}

/* Mobile Navigation */
.ww-mobile-nav-link {
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: var(--ww-primary);
  text-decoration: none;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

.ww-mobile-nav-link:hover,
.ww-mobile-nav-link.active {
  background-color: #f3f4f6;
  color: var(--ww-primary);
}

/* ---- Page Header ---- */
.ww-page-header {
  background-color: var(--ww-beige);
}

.ww-icon-circle {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.ww-icon-circle--primary { background-color: var(--ww-primary); }

/* ---- Sticky Tab Navigation ---- */
.ww-sticky-tabs {
  position: sticky;
  top: 0; /* Wird per JS an Header-Hoehe angepasst */
  z-index: 1040;
  backdrop-filter: blur(8px);
  background-color: rgba(248,249,250,0.95);
}

.ww-tab-btn {
  width: 100%;
  padding:0;
  background: #fff;
  border: none;
  border-top: 4px solid;
  border-radius: 0.375rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ww-tab-btn a { 
  display:inline-block;
  padding: 16px;
  line-height: 20px;
  width: 100%;
}

.ww-tab-btn h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: #1f2937;
  transition: color 0.2s;
}

/* Tab Color Variants */
.ww-tab-btn--blue  { border-top-color: rgba(0,90,156,0.3); }
.ww-tab-btn--red   { border-top-color: rgba(204,8,55,0.3); }
.ww-tab-btn--slate { border-top-color: rgba(71,85,105,0.3); }
.ww-tab-btn--teal  { border-top-color: rgba(13,148,136,0.3); }

.ww-tab-btn--blue.active,
.ww-tab-btn--blue:hover  { background-color: #EFF6FF; border-top-color: var(--ww-blue); }
.ww-tab-btn--blue.active h3,
.ww-tab-btn--blue:hover h3 { color: var(--ww-blue); }

.ww-tab-btn--red.active,
.ww-tab-btn--red:hover   { background-color: #FEF2F2; border-top-color: var(--ww-red); }
.ww-tab-btn--red.active h3,
.ww-tab-btn--red:hover h3 { color: var(--ww-red); }

.ww-tab-btn--slate.active,
.ww-tab-btn--slate:hover { background-color: #F8FAFC; border-top-color: var(--ww-slate); }
.ww-tab-btn--slate.active h3,
.ww-tab-btn--slate:hover h3 { color: var(--ww-slate); }

.ww-tab-btn--teal.active,
.ww-tab-btn--teal:hover  { background-color: #F0FDFA; border-top-color: var(--ww-teal); }
.ww-tab-btn--teal.active h3,
.ww-tab-btn--teal:hover h3 { color: var(--ww-teal); }

/* ---- Tab Content ---- */
.ww-tab-content {
  display: none;
}

.ww-tab-content.active {
  display: block;
  animation: wwFadeIn 0.4s ease;
}

@keyframes wwFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Sticky Sidebar ---- */
.ww-sidebar {
  position: sticky;
  top: 220px; /* Header + Tabs + Padding */
}

.ww-sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ww-sidebar-link {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 14px;
  color: #4b5563;
  text-decoration: none;
  border-radius: 0.375rem;
  border-left: 2px solid transparent;
  transition: all 0.2s;
}

.ww-sidebar-link:hover {
  background-color: #f3f4f6;
  color: #1f2937;
  text-decoration: none;
}

.ww-sidebar-link.active {
  font-weight:700; background-color: #FEF2F2; color:var(--ww-red); border-radius:10px;
}
.colorBlue .ww-sidebar-link.active,
.colorBlue .ww-sidebar-link:hover {
  background-color: #EFF6FF; color:var(--ww-blue);
}
.colorGrey .ww-sidebar-link.active,
.colorGrey .ww-sidebar-link:hover {
  background-color: #F8FAFC; color:var(--ww-slate);
}
.colorGreen .ww-sidebar-link.active,
.colorGreen .ww-sidebar-link:hover {
  background-color: #F0FDFA; color:var(--ww-teal);
}

.ww-sidebar-link:hover {
  background-color: #FEF2F2; color:var(--ww-red); border-radius:10px;
}

.border-primary-subtle {
    border-left: solid 2px #ffe2e2!important;
}
.colorBlue .border-primary-subtle {
    border-left: solid 2px #EFF6FF!important;
}
.colorGrey .border-primary-subtle {
    border-left: solid 2px #F8FAFC!important;
}
.colorGreen .border-primary-subtle {
    border-left: solid 2px #F0FDFA!important;
}

.ww-sidebar-link-sub.active {
    font-weight:bold;
    color: var(--ww-red);
}

.ww-sidebar-link-sub:hover {
    color: var(--ww-red);
}

.colorBlue .ww-sidebar-link-sub.active,
.colorBlue .ww-sidebar-link-sub:hover {
    color:var(--ww-blue);
}
.colorGrey .ww-sidebar-link-sub.active,
.colorGrey .ww-sidebar-link-sub:hover {
    color:var(--ww-slate);
}
.colorGreen .ww-sidebar-link-sub.active,
.colorGreen .ww-sidebar-link-sub:hover {
    color:var(--ww-teal);
}

.ww-sidebar-link-sub {
  display: block;
  padding: 0.375rem 0.5rem;
  font-size: 12px;
  color: #6b7280;
  text-decoration: none;
  border-radius: 0.375rem;
  transition: all 0.2s;
}

/* Sidebar color variants - Blue */
[data-ww-color="blue"] .ww-sidebar-link.active {
  color: var(--ww-blue);
  background-color: #EFF6FF;
  border-left-color: var(--ww-blue);
}
[data-ww-color="blue"] .ww-sidebar-link:hover {
  background-color: #EFF6FF;
  color: var(--ww-blue);
}

/* Sidebar color variants - Red */
[data-ww-color="red"] .ww-sidebar-link.active {
  color: var(--ww-red);
  background-color: #FEF2F2;
  border-left-color: var(--ww-red);
}
[data-ww-color="red"] .ww-sidebar-link:hover {
  background-color: #FEF2F2;
  color: var(--ww-red);
}

/* Sidebar color variants - Slate */
[data-ww-color="slate"] .ww-sidebar-link.active {
  color: var(--ww-slate);
  background-color: #F8FAFC;
  border-left-color: var(--ww-slate);
}
[data-ww-color="slate"] .ww-sidebar-link:hover {
  background-color: #F8FAFC;
  color: var(--ww-slate);
}

/* Sidebar color variants - Teal */
[data-ww-color="teal"] .ww-sidebar-link.active {
  color: var(--ww-teal);
  background-color: #F0FDFA;
  border-left-color: var(--ww-teal);
}
[data-ww-color="teal"] .ww-sidebar-link:hover {
  background-color: #F0FDFA;
  color: var(--ww-teal);
}

/* ---- Accent Bars ---- */
.ww-accent-bar {
  width: 4px;
  height: 24px;
  border-radius: 2px;
  display: inline-block;
}

.ww-accent-bar-lg {
  width: 8px;
  height: 32px;
  border-radius: 2px;
  display: inline-block;
}

/* Color utility classes (namespaced) */
.ww-bg-blue    { background-color: var(--ww-blue); }
.ww-bg-red     { background-color: var(--ww-red); }
.ww-bg-slate   { background-color: var(--ww-slate); }
.ww-bg-teal    { background-color: var(--ww-teal); }
.ww-bg-beige   { background-color: var(--ww-beige); }
.ww-bg-dark-gray   { background-color: var(--ww-dark-gray); }
.ww-bg-darker-gray { background-color: var(--ww-darker-gray); }

.ww-text-blue  { color: var(--ww-blue); }
.ww-text-red   { color: var(--ww-red); }
.ww-text-slate { color: var(--ww-slate); }
.ww-text-teal  { color: var(--ww-teal); }

/* ---- Colored Info Boxes ---- */
.ww-box--blue {
  background-color: rgba(239,246,255,0.5);
  border: 1px solid #93C5FD;
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.ww-box--red {
  background-color: rgba(254,242,242,0.5);
  border: 1px solid #FECACA;
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.ww-box--slate {
  background-color: rgba(248,250,252,0.5);
  border: 1px solid #CBD5E1;
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.ww-box--teal {
  background-color: rgba(240,253,250,0.5);
  border: 1px solid #5EEAD4;
  border-radius: 0.5rem;
  padding: 1.5rem;
}

/* ---- Anchor scroll offset ---- */
.ww-anchor {
  scroll-margin-top: 288px;
}

/* ---- Content Sections ---- */
.ww-content {
  line-height: 1.75;
}

.ww-content .lead {
  font-size: 1.125rem;
  line-height: 1.75;
}

/* ---- Footer ---- */
.ww-footer {
  font-family: var(--ww-font);
}

.ww-footer-link {
  color: #d1d5db;
  text-decoration: none;
  transition: all 0.2s;
}

.ww-footer-link:hover {
  color: white;
  text-decoration: underline;
}

.ww-social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ww-primary);
  text-decoration: none;
  transition: all 0.3s;
}

.ww-social-icon:hover {
  background-color: #e5e7eb;
  transform: scale(1.1);
  color: var(--ww-primary);
}

/* ---- Hero Section (Startseite) ---- */
.ww-hero {
  position: relative;
  min-height: 500px;
}

.ww-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.ww-hero-card {
  background: rgba(255,255,255,0.95);
  border-top: 8px solid var(--ww-primary);
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}

/* ---- Target Group Cards ---- */
.ww-card {
  transition: all 0.3s;
  border: 1px solid #f3f4f6;
  overflow: hidden;
}

.ww-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.ww-card:hover .ww-card-bar {
  background-color: var(--ww-primary);
}

.ww-card:hover .ww-card-title {
  color: var(--ww-primary);
}

.ww-card:hover .ww-card-img {
  transform: scale(1.05);
}

.ww-card-img {
  transition: transform 0.5s;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .ww-sticky-tabs {
    top: 56px; /* Bootstrap default navbar-height auf Mobile */
  }

  .ww-sidebar {
    position: static;
  }

  .ww-anchor {
    scroll-margin-top: 180px;
  }

  .ww-nav-link {
    font-size: 16px;
    padding: 0.375rem 0.75rem;
  }
}

@media (max-width: 575.98px) {
  .ww-tab-btn {
    min-height: 48px;
  }

  .ww-tab-btn h3 {
    font-size: 12px;
  }
}
/* Erg�nzugen*/

.ww-tab-btn h3 a {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit; /* Verhindert das typische Link-Blau */
    text-decoration: none;
}

@media (min-width: 768px) {
    .footerContainer {
      gap:60px;
    }
    .footerContainer .col-md-4 {
      width:calc((100% - 120px) / 3);
    }
}

.ww-footer li > a {
    text-decoration:none;
    color:#fff;
}
.ww-footer li > a:hover {
    text-decoration:underline;
}
.ww-footer li > a {
    line-height:27px;
    font-size:18px;
    display:block;
    margin:22px 0;
}

.startBgImage {
    padding:100px 0;
    background: url(/fileadmin/template/images/bg-image.jpg) center / cover;
}

.container.maxContentWidth {
    max-width: 1380px;
}

.contentBox {
    background-color:#fffffff2;
    border-top: solid 8px var(--ww-primary);
    border-radius: 12px;
    padding:min(5vw,64px);
}

.contentBox > * {
    margin-bottom:18px;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 700;
}

.button {
    display:inline-block;
    margin-right:25px;
    background-color:var(--ww-primary);
    border-radius: 10px;
    font-size:20px;
    font-weight:700;
    line-height:31px;
    padding:18px 36px;
    color:#fff;
    text-decoration:none;
    transition: all 0.5s;
}
.button:hover {
    background-color:#850120;
}

.button.light {
    background-color:#fff;
    color:var(--ww-primary);
    outline: solid 2px var(--ww-primary);
}
.button.light:hover {
    background-color:#cc083711;
}

.bgLightGrey {
    background-color: rgba(248, 249, 250, 0.95);
    padding:min(10vw,128px) 0;
}

.bgWhite {
    background-color: fff;
    padding:min(10vw,128px) 0;
}

.textCenter {
    text-align:center;
}

.headlineBox {
    max-width:880px;
    margin-left:auto;
    margin-right:auto;
}

.borderBottomRed {
    border-bottom: solid 5px var(--ww-primary);
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 36px;
}

.borderLeftRed,
.frame-type-text header > *:first-child {
    border-left: solid 5px var(--ww-primary);
    padding-left: 15px;
}
.colorBlue .frame-type-text header > *:first-child { border-color:var(--ww-blue); }
.colorGrey .frame-type-text header > *:first-child { border-color:var(--ww-slate); }
.colorGreen .frame-type-text header > *:first-child { border-color:var(--ww-teal); }

.frame-type-text header { margin-bottom: 46px; }

.teaserBox {
    display:flex;
    flex-direction: column;
    gap: 50px;
    margin-top: 50px;
}

.startTeaser {
    background-color:#fff;
    box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
    border-radius:12px;
    transition: all 0.5s;
}

.startTeaser:hover {
  box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;
}

.startTeaser a {
    display:block;
    text-decoration:none;
    color: var(--ww-text);
    position:relative;
    height: 100%;
}

.startTeaser .image {
    overflow:hidden;
    border-bottom: solid 5px #e5e7eb;
    border-radius: 12px 12px 0 0;
    transition: all 0.5s;
    position:relative;
}

.startTeaser .image::after {
    content: '';
    display:block;
    width:100%;
    height:100%;
    background-color:#0002;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s;
}

.startTeaser:hover .image::after {
    background-color:#0000;
}

.startTeaser:hover .image {
    border-color:var(--ww-primary);
}

.startTeaser .image img {
    aspect-ratio: 2;
    object-fit: cover;
    width:100%;
    transition: all 0.5s;
}

.startTeaser:hover .image img {
    transform: scale(1.1);
}

.startTeaser .icon {
    position: absolute;
    top: 36px;
    left: 36px;
    width: 63px;
    line-height: 63px;
    background-color: #fff;
    text-align: center;
    border-radius: 50%;
}

.startTeaser .icon svg {
    width:36px;
    height:36px;
}

.startTeaser .text {
    padding:20px;
}

.startTeaser h3 {
    transition: all 0.5s;
}

.startTeaser:hover h3 {
    color:var(--ww-primary);
}

.startTeaser .more {
    transition: all 0.5s;
    position:relative;
    left:0;
}

.startTeaser:hover .more {
    left:16px;
}

@media (min-width: 1000px) {
    .teaserBox {
        flex-direction: row;
    }
    .startTeaser {
        width: calc((100% - 100px) / 3);
    }
    .startTeaser .text {
        padding:36px 36px 80px 36px;
    }
    .startTeaser .more {
        position:absolute;
        bottom: 20px;
        left:36px;
    }
    .startTeaser:hover .more {
        left:52px;
    }
}

img {
    max-width:100%;
}

.newsList {
    margin-bottom:25px;
}

.newsItem a {
    display:block;
    color: var(--ww-text);
    padding:20px 0 10px;
    border-bottom: solid 1px #f3f4f6;
    text-decoration:none;
}

.newsItem a .date {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 9px;
}

.newsItem a h3 {
    font-size: 22px;
    transition: all 0.5s;
}

.newsItem a:hover h3 {
    color:var(--ww-primary);
}

.newsItem a .date {
    color:var(--ww-primary);
}

.moreArrow {
    color:var(--ww-primary);
    font-weight:700;
    text-decoration:none;
}

.moreArrow:hover {
    text-decoration:underline;
    text-underline-offset: 4px;
}

.moreArrow::after {
    content: '';
    display:inline-block;
    width:18px;
    height:18px;
    background: url(/fileadmin/template/images/more-arrow-red.svg) center / cover;
    vertical-align: middle;
    margin-left:4px;
    transition: all 0.5s;
}

.moreArrow:hover::after {
    margin-left:8px;
}

.bgContactBox {
    padding: 20px;
    border-radius:12px;
    background-color:#f9fafb;
    border: solid 1px #f3f4f6;
    position:relative;
    overflow:hidden;
    height: 100%;
}

.bgContactBox::before {
    content: '';
    background-color: #f6edf1;
    display:block;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position:absolute;
    top: -150px;
    right: -150px;
}

.bgContactBox > * {
    position:relative;
}

.iconBox {
    display:flex;
    flex-direction: column;
    gap: 5px;
}

p + .iconBox {
    margin-top:45px;
}

.iconBox .icon span {
    display:block;
    width:45px;
    line-height:45px;
    box-shadow: 0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;
    border-radius:50%;
    color: var(--ww-primary);
    text-align:center;
    background-color:#fff;
}

.twoColBox {
    display:flex;
    flex-direction: column;
    gap: 50px;
}

@media (min-width: 1000px) {
    .iconBox {
        flex-direction: row;
        gap: 15px;
    }
    .twoColBox {
        flex-direction: row;
    }
    .twoColBox .col {
        width:calc((100% - 50px) / 2);
    }
    .bgContactBox {
        padding: 45px;
    }
}

.contenttable {
    width: 100%;
    background-color:#fef8f8!important;
    border: solid 1px #ffe2e2!important;
    outline: solid 1px #ffe2e2!important;
    border-radius: 12px;
    overflow:hidden;
    display: block;
    margin:46px 0;
}

.contenttable tr {
    background-color:transparent!important;
}

.contenttable th,
.contenttable td {
    font-weight: normal;
    padding: 20px;
}

.contenttable h2,
.contenttable h3,
.contenttable h4 {
    color: var(--ww-primary);
}

.colorBlue .contenttable {
    background-color:#f6fafe!important;
    border-color: #dbeafe!important;
    outline-color: #dbeafe!important;
}
.colorBlue .contenttable h2,
.colorBlue .contenttable h3,
.colorBlue .contenttable h4 {
    color: #005a9c;
}

.colorGrey .contenttable {
    background-color:#fbfcfd!important;
    border-color: #f1f5f9!important;
    outline-color: #f1f5f9!important;
}
.colorGrey .contenttable h2,
.colorGrey .contenttable h3,
.colorGrey .contenttable h4 {
    color: #475569;
}

.colorGreen .contenttable {
    background-color:#f7fefc!important;
    border-color: #cbfbf1!important;
    outline-color: #cbfbf1!important;
}
.colorGreen .contenttable h2,
.colorGreen .contenttable h3,
.colorGreen .contenttable h4 {
    color: #0d9488;
}

.ww-sticky-tabs a {
    color: var(--ww-text);
    text-decoration:none;
    font-weight:700;
    font-size:16px;
}

.ww-sticky-tabs .ww-tab-btn--blue.active a {
    color:var(--ww-blue);
}

.ww-sticky-tabs .ww-tab-btn--red.active a {
    color:var(--ww-primary);
}

.ww-sticky-tabs .ww-tab-btn--slate.active a {
    color:var(--ww-slate);
}

.ww-sticky-tabs .ww-tab-btn--teal.active a {
    color:var(--ww-teal);
}

.frame-type-indexedsearch_pi2 {
    max-width: 1380px;
    width: 100%;
    padding: 46px calc(1.5rem * .5);
    margin-right: auto;
    margin-left: auto;

}

@media (min-width: 992px) {
    .ww-header nav.d-lg-flex a:last-child {
      text-indent: -1000px;
      position: relative;
      border-radius: 50%;
      width: 45px;
      height: 45px;
      overflow:hidden;
    } 
  
    .ww-header nav.d-lg-flex a:last-child::after {
        content: '';
        display:inline-block;
        width:27px;
        height:27px;
        background: url(/fileadmin/template/images/search-icon.svg) center / cover;
        vertical-align: middle;
        position: absolute;
        top: 9px;
        right: 10px;
      }
}

.tx-indexedsearch-form {
    float:left;
}
.tx-indexedsearch-searchbox-button {
    appearance: none;
    border: 0;
    background-color:var(--ww-primary);
    height: 35px;
    color: #fff;
    padding: 0 20px;
}

.bgLightGreyFrame {
    background-color: rgba(248, 249, 250, 0.95);
}

.tx-indexedsearch-info-sword,
.tx-indexedsearch-browsebox {
    display:none;
}

.tx-indexedsearch-res {
    border-top: solid 1px #eee;
    margin-top:30px;
    padding: 30px 0 0;
}