/* === 1. IMPORTS & GLOBAL TYPO === */
@import url("https://cdn.dawesys.de/css/font-barlow-condensed.css");
@import url("https://cdn.dawesys.de/css/font-inter.css");

.dws-seitenstruktur-main { display: flex; flex-direction: column; }

/* Bold-Gewichtung gruppiert */
.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6, 
.nav-link, .accordion-header .accordion-button,
.teamschlueter-button, .teamschlueter-zurueck-button { font-weight: bold; }

h1, .h1 { font-size: 3.5rem; line-height: 3.875rem; margin-bottom: 1.4rem; }
h2, .h2 { font-size: 2.94rem; line-height: 3.375rem; margin-bottom: 1.25rem; }
h3, .h3, h3 a, .h3 a { font-size: 2.46rem; line-height: 2.96rem; margin-bottom: 1rem; }
h4, .h4 { font-size: 2.05rem; line-height: 2.3rem; margin-bottom: 0.95rem; }

p, a, ul li, li, ol li { font-size: 1.18rem; line-height: 1.875rem; margin-bottom: 0.875rem; }
span { margin-bottom: 0; }
span.navbar-toggler-icon, ul.navbar-nav li, ul.navbar-nav li a { margin-bottom: 0rem; }
.lead { line-height: 2.3rem; margin-bottom: 1rem; }

.nav-link {  font-family: "Barlow Condensed", "sans-serif";  font-size: 1.18rem; line-height: 1.5rem;  text-transform: uppercase; color: var(--bs-primary);}

/* === 2. SEITENSTRUKTUR & FOOTER === */
.navbar .container { border-bottom: solid 1px; }
.nav-item:hover { border-bottom: 1px solid; margin: 0px; }
.navbar-nav .nav-item:last-child { border: 2px solid; margin: 0px; }
.offcanvas-body .navbar-nav .nav-item:last-child { border: 0px solid; margin: 0px; }
.navbar-nav .nav-item:last-child:hover { background-color: var(--bs-secondary); transition: all 0.2s ease-in-out; }
.navbar-nav .nav-item:last-child:hover a { color: white; }
.navbar-expand-lg .navbar-nav { gap: 5px; }

.row.dws-dreispalten-rowclass { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }
.dws-einespalte-rowclass .col { padding-left: 1rem; padding-right: 1rem; }
.dws-seitenstruktur-footer { padding: 0; }

/* FOOTER-BLOCK */
.footer .text-end {  display: flex;  flex-direction: row;  gap: 40px;  justify-content: end;}
.footer .text-end a:hover {text-decoration:underline;}
footer.footer .dws-zweispalten-divclass .dws-zweispalten-rowclass { display: flex; justify-content: center; align-items: center; padding: 1rem 0;}
footer.footer .dws-zweispalten-divclass .dws-zweispalten-rowclass > div { margin: 0 !important;}
footer.footer .dws-zweispalten-divclass .dws-zweispalten-rowclass p { padding: 0; margin: 0;}
.footer .text-end a:hover { border-bottom: 1px solid #fff; transition: 500ms;}

/* === 3. FARBEN & LISTEN === */
hr { color: var(--bs-primary); }
.bg-dark, .bg-primary, .bg-dark li, .bg-primary li, .bg-dark a, .bg-primary a { color: white !important; }
.bg-dark a, .bg-primary a { text-decoration: none; }
.bg-light { color: var(--bs-primary) !important; }
a { text-decoration: none !important; }

main ul { list-style: none; padding-left: 0; }
main li { position: relative; padding-left: 1.5em; }
main ul li::before { content: "\2014"; position: absolute; left: 0; color: auto; }

.list-group li::marker, .news-list-items li::marker { content: ""; }
.list-group li::before, .news-list-items li::before { content: none !important; }

.accordion-header .accordion-button {  font-size: 1.18rem; line-height: 1.875rem;  font-family: "Inter", "sans-serif"; background-color: white;}

/* === 4. EIGENE ELEMENTE (BUTTONS & CARDS) === */
.teamschlueter-button, .teamschlueter-zurueck-button {
  text-decoration: none; font-family: "Barlow Condensed"; text-transform: uppercase;
  color: #fff; background-color: var(--bs-primary); border-radius: 0;
  padding: 0.75rem 1.25rem; font-size: 1.125rem;
  box-shadow: 0 0 0 0.3rem #fff, 0 0 0 0.5rem var(--bs-primary);
  transition: all 0.2s ease-in-out; margin: 0.5rem;
}
.teamschlueter-button:after { content: "\f178"; font-family: "Font Awesome 5 Free"; font-weight: bold; padding-left: 0.5em; }
.teamschlueter-zurueck-button:before { content: "\f177"; font-family: "Font Awesome 5 Free"; font-weight: bold; padding-right: 0.5em; }
.teamschlueter-button:hover, .teamschlueter-button:focus,
.teamschlueter-zurueck-button:hover, .teamschlueter-zurueck-button:focus { background-color: #319b9f !important; color: #fff; }
.teamschlueter-button:focus-visible::after { box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); }

.teamschlueter-border-right { padding: 0; border-right: 8px solid #30979b; box-sizing: border-box; }
.card { border-radius: 0; }

/* Team Cards */
.card.teamschlueter-team-card .card-footer p { font-size: 1.05rem; margin: 0; }
.teamschlueter-team-card .card-footer { display: flex; flex-direction: column; justify-content: space-between; height: 160px; background-color: white; }
.teamschlueter-team-card .card-body { min-height: 170px; }
.teamschlueter-team-card img { margin: 0; width: 100%; height: auto; }

/* Referenzen Cards */
.teamschlueter-referenzen-card .card-header { display: flex; justify-content: center; align-items: center; font-size: 2.05rem; line-height: 2.3rem; height: 150px; background-color: white; }
.teamschlueter-referenzen-card .card-body { min-height: 405px; }
.teamschlueter-referenzen-card .card-body ul li, .teamschlueter-referenzen-card .card-body ul li strong { font-size: 1rem; line-height: 1.5; }
.teamschlueter-referenzen-card .card-body ul li { margin-bottom: 1rem; }
.teamschlueter-referenzen-card .card-footer { height: 80px; background-color: var(--bs-primary) !important; display: flex; padding: 0; }
.teamschlueter-referenzen-card .card-footer a { display: flex; align-items: center; height: 100%; font-size: 1.05rem; width: 100%; justify-content: space-between; padding: 16px; }
.teamschlueter-referenzen-card .card-footer a:hover { background: #30979b !important; transition: 300ms; cursor: pointer; }
.teamschlueter-referenzen-card .card-footer a span { margin-left: 8px; }
.teamschlueter-referenzen-card .card-footer a:hover span { text-decoration: none; }
.teamschlueter-referenzen-card .card-footer p { margin-bottom: 0; width: 100%; }
.teamschlueter-referenzen-card .dws-contentelement-card-image { position: absolute; top: -32px; left: 50%; transform: translateX(-50%); height: 64px; width: auto; border-left: 16px solid white; border-right: 16px solid white; display: block; }

.teamschlueter-kundenstimme { background-color: var(--bs-success); color: white; padding: 3; }

/* === 5. NEWS & CREATIVECOUCH === */
.article { margin-bottom: 5rem; }
.frame-type-news_newsdetail { margin-top: 3rem; margin-left: 5vw; margin-right: 5vw; }
@media screen and (min-width: 576px) { .frame-type-news_newsdetail { margin-top: 4rem; margin-left: 10vw; margin-right: 10vw; } }
@media screen and (min-width: 768px) { .frame-type-news_newsdetail { margin-top: 5rem; margin-left: 20vw; margin-right: 20vw; } }
@media screen and (min-width: 992px) { .frame-type-news_newsdetail { margin-top: 5rem; margin-left: 30vw; margin-right: 30vw; } }

.ts-news-design .news-list-item img.img-fluid { border-radius: 24px; }
.ts-news-design .news-list-item .articletype-0 { display: flex; flex-direction: column; justify-content: center; }
.ts-news-design .news-list-item .articletype-0 .extra { order: 1; font-size: 14px; margin: 0 !important; padding: 0; }
.ts-news-design .news-list-item .articletype-0 h3 { font-weight: 500; order: 2; }
.ts-news-design .news-list-item .articletype-0 .lead { display: none; order: 3; }
.ts-news-design .news-list-item .topnews .lead { display: block; }
.ts-news-design .news-list-item .articletype-0 .btn-read-more { order: 4; background: transparent; border: 0 none; text-align: left; color: #000; padding: 0; }
.ts-news-design .news-list-item .articletype-0 .btn-read-more:after { content: "→"; font-size: 24px; padding-left: 4px; }
.ts-news-design .news-list-item:hover .articletype-0 .btn-read-more { color: #30979b; transition: 500ms; }
.ts-news-design .news-list-item:hover .articletype-0 .btn-read-more:after { padding-left: 8px; transition: 500ms; }

.ts-news-design .news-list-view li:first-child { margin-bottom: 2rem; }
.ts-news-design .news-list-view li:first-child > div { background: #fff; }
.ts-news-design .news-list-view li:first-child .lead p { padding-bottom: 0; margin-bottom: 0; }
.ts-news-design .news-list-view li:first-child .news-list-item img.img-fluid { border-radius: 0px; }
.ts-news-design .news-list-view li .articletype-0 { padding: 2rem 5rem 2rem 1.5rem; }
.ts-news-design .news-list-view li > div { background: transparent; padding: 0; justify-content: center; margin: 0; display: flex; align-items: center; }

/* === 6. FOUR GRID === */
.font-small p { font-size: 1.05rem; line-height: 1.7rem; }
.ts-four-grid .dws-contentelement-text-text { display: flex; flex-direction: column; }
.ts-four-grid .dws-contentelement-text-text p { margin-top: 0; margin-bottom: 0.35cm; min-height:190px;}
.ts-four-grid .dws-contentelement-text-text p:nth-of-type(2) { min-height: 190px; }
.ts-four-grid .dws-contentelement-text-text hr { margin-top: 0; }
.ts-four-grid .dws-contentelement-text-text p:last-of-type { min-height: 0; }
.ts-four-grid .dws-contentelement-text-text a:hover { border-bottom:1px solid #2a2a2a; transition: 500ms; }
.ts-four-grid .dws-contentelement-text-text a {padding-bottom:8px; border-bottom:1px solid #fff;}


@media (min-width: 576px) and (max-width: 991.98px) {
  h1, .h1 { font-size: 2.8rem; line-height: 3.2rem; }
  h2, .h2 { font-size: 2.4rem; line-height: 2.8rem; }
  h3, .h3, h3 a, .h3 a { font-size: 2.0rem; line-height: 2.4rem; }
  h4, .h4 { font-size: 1.7rem; line-height: 2.0rem; }
  p, span, a, ul li, ol li { font-size: 1.05rem; line-height: 1.65rem; }
  .lead { font-size: 1.15rem; line-height: 1.85rem; }
  .offcanvas .offcanvas-header h5, .offcanvas hr { display: none; }
  .btn-close-white {--bs-btn-close-filter: invert(0) grayscale(100%) brightness(200%);}
  .nav-item:hover {border-bottom: 0px solid; margin: 0px;}
  .navbar-nav .nav-item:last-child:hover {background-color: transparent;}
  .navbar-nav .nav-item:last-child:hover a {color: #000;}
    .navbar-nav .nav-item:hover { padding: 0 8px; width: 100%; transition: all 0.2s ease-in-out; }
}

/* === 7. DER MOBILE BLOCK (max-width: 575.98px) === */
@media (max-width: 575.98px) {
  h1, .h1 { font-size: 2.2rem; line-height: 2.6rem; }
  h2, .h2 { font-size: 1.9rem; line-height: 2.3rem; }
  h3, .h3, h3 a, .h3 a { font-size: 1.6rem; line-height: 2.1rem; }
  h4, .h4 { font-size: 1.35rem; line-height: 1.8rem; }
  p, span, a, ul li, ol li { font-size: 1rem; line-height: 1.6rem; }
  .lead { font-size: 1.05rem; line-height: 1.8rem; }
  .nav-link { font-size: 1.5rem; line-height: 2.1rem; margin: 1rem; padding: 0; }
  h2.accordion-header .accordion-button { font-size: 0.9rem; line-height: 1.5rem; font-weight: 600; }
  .accordion-body p { font-size: 0.9rem; line-height: 1.25rem; }
  .teamschlueter-button, .teamschlueter-zurueck-button { font-size: 1rem; padding: 0.65rem 1rem; }
  .teamschlueter-referenzen-card .card-header { font-size: 1.5rem; line-height: 1.9rem; height: 120px; }
  .teamschlueter-referenzen-card .card-body ul li, .teamschlueter-referenzen-card .card-body ul li strong { font-size: 0.95rem; line-height: 1.45rem; }
  .ts-news-design .news-list-view li .articletype-0 { padding: 1rem; }
  .ts-news-design .news-list-view li:first-child > div > div { padding: 16px; }
  .teamschlueter-team-card .card-body { min-height: auto; }
  .teamschlueter-team-card .card-footer { height: 160px; }
    .nav-item:hover {border-bottom: 0px solid; margin: 0px;}
      .navbar-nav .nav-item:last-child:hover {    background-color: transparent;}
  .navbar-nav .nav-item:last-child:hover a {    color: #000;}
      .navbar-nav .nav-item:hover { padding: 0 8px; width: 100%; transition: all 0.2s ease-in-out; }
      .col-d-none { display: none;}
      .ts-four-grid .dws-contentelement-text-text p {min-height: 100px;}

  /*Footer*/
  .footer .text-end { display: flex;    flex-direction: column;    gap: 5px;    justify-content: center; }
  .footer .text-end a { text-align: center;}
  .footer .dws-contentelement-image {max-width:200px;  }

  /* Mobile Navbar & UI Fixes */
  .teamschlueter-icon-box.teamschlueter-border-right > div { flex-direction: column !important; }
  .teamschlueter-icon-box.teamschlueter-border-right > div .dws-contentelement-classicontext-text { padding-left: 1.5rem !important; }
  a.navbar-brand img { max-height: 64px !important; }
  .btn-close-white { --bs-btn-close-filter: invert(0) grayscale(100%) brightness(200%); }
  .offcanvas .offcanvas-header h5, .offcanvas hr { display: none; }
  .offcanvas-body ul li { margin-bottom: 0; }
  .offcanvas-body .navbar-nav .nav-item:last-child { border: 0px solid; }
  .navbar-nav .nav-item:hover { padding: 0 8px; width: 100%; }

  /* === UTILITY CLASSES (5-9) === */
  /* Margin */
  .m-5, .mx-5 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .m-5, .my-5, .mt-5 { margin-top: 1.5rem !important; }
  .m-5, .my-5, .mb-5 { margin-bottom: 1.5rem !important; }
  .ms-5 { margin-left: 1.5rem !important; } .me-5 { margin-right: 1.5rem !important; }

  .m-6, .mx-6 { margin-left: 2rem !important; margin-right: 2rem !important; }
  .m-6, .my-6, .mt-6 { margin-top: 2rem !important; }
  .m-6, .my-6, .mb-6 { margin-bottom: 2rem !important; }
  .ms-6 { margin-left: 2rem !important; } .me-6 { margin-right: 2rem !important; }

  .m-7, .mx-7 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; }
  .m-7, .my-7, .mt-7 { margin-top: 2.5rem !important; }
  .m-7, .my-7, .mb-7 { margin-bottom: 2.5rem !important; }
  .ms-7 { margin-left: 2.5rem !important; } .me-7 { margin-right: 2.5rem !important; }

  .m-8, .mx-8 { margin-left: 3rem !important; margin-right: 3rem !important; }
  .m-8, .my-8, .mt-8 { margin-top: 3rem !important; }
  .m-8, .my-8, .mb-8 { margin-bottom: 3rem !important; }
  .ms-8 { margin-left: 3rem !important; } .me-8 { margin-right: 3rem !important; }

  .m-9, .mx-9 { margin-left: 3.5rem !important; margin-right: 3.5rem !important; }
  .m-9, .my-9, .mt-9 { margin-top: 3.5rem !important; }
  .m-9, .my-9, .mb-9 { margin-bottom: 3.5rem !important; }
  .ms-9 { margin-left: 3.5rem !important; } .me-9 { margin-right: 3.5rem !important; }

  /* Padding */
  .p-5, .px-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .p-5, .py-5, .pt-5 { padding-top: 1.5rem !important; }
  .p-5, .py-5, .pb-5 { padding-bottom: 1.5rem !important; }
  .ps-5 { padding-left: 1.5rem !important; } .pe-5 { padding-right: 1.5rem !important; }

  .p-6, .px-6 { padding-left: 2rem !important; padding-right: 2rem !important; }
  .p-6, .py-6, .pt-6 { padding-top: 2rem !important; }
  .p-6, .py-6, .pb-6 { padding-bottom: 2rem !important; }
  .ps-6 { padding-left: 2rem !important; } .pe-6 { padding-right: 2rem !important; }

  .p-7, .px-7 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
  .p-7, .py-7, .pt-7 { padding-top: 2.5rem !important; }
  .p-7, .py-7, .pb-7 { padding-bottom: 2.5rem !important; }
  .ps-7 { padding-left: 2.5rem !important; } .pe-7 { padding-right: 2.5rem !important; }

  .p-8, .px-8 { padding-left: 3rem !important; padding-right: 3rem !important; }
  .p-8, .py-8, .pt-8 { padding-top: 3rem !important; }
  .p-8, .py-8, .pb-8 { padding-bottom: 3rem !important; }
  .ps-8 { padding-left: 3rem !important; } .pe-8 { padding-right: 3rem !important; }

  .p-9, .px-9 { padding-left: 3.5rem !important; padding-right: 3.5rem !important; }
  .p-9, .py-9, .pt-9 { padding-top: 3.5rem !important; }
  .p-9, .py-9, .pb-9 { padding-bottom: 3.5rem !important; }
  .ps-9 { padding-left: 3.5rem !important; } .pe-9 { padding-right: 3.5rem !important; }

  /* Gaps */
  .gap-5, .row-gap-5, .column-gap-5 { gap: 1.5rem !important; row-gap: 1.5rem !important; column-gap: 1.5rem !important; }
  .gap-6, .row-gap-6, .column-gap-6 { gap: 2rem !important; row-gap: 2rem !important; column-gap: 2rem !important; }
  .gap-7, .row-gap-7, .column-gap-7 { gap: 2.5rem !important; row-gap: 2.5rem !important; column-gap: 2.5rem !important; }
  .gap-8, .row-gap-8, .column-gap-8 { gap: 3rem !important; row-gap: 3rem !important; column-gap: 3rem !important; }
  .gap-9, .row-gap-9, .column-gap-9 { gap: 3.5rem !important; row-gap: 3.5rem !important; column-gap: 3.5rem !important; }
}

@media (min-width: 576px) and (max-width: 991.98px) {

  /* Margin */
  .m-5, .mx-5 { margin-left: 2rem !important; margin-right: 2rem !important; }
  .m-5, .my-5, .mt-5 { margin-top: 2rem !important; }
  .m-5, .my-5, .mb-5 { margin-bottom: 2rem !important; }

  .m-6, .mx-6 { margin-left: 3rem !important; margin-right: 3rem !important; }
  .m-6, .my-6, .mt-6 { margin-top: 3rem !important; }
  .m-6, .my-6, .mb-6 { margin-bottom: 3rem !important; }

  .m-7, .mx-7 { margin-left: 4rem !important; margin-right: 4rem !important; }
  .m-7, .my-7, .mt-7 { margin-top: 4rem !important; }
  .m-7, .my-7, .mb-7 { margin-bottom: 4rem !important; }

  .m-8, .mx-8 { margin-left: 5.5rem !important; margin-right: 5.5rem !important; }
  .m-8, .my-8, .mt-8 { margin-top: 5.5rem !important; }
  .m-8, .my-8, .mb-8 { margin-bottom: 5.5rem !important; }

  .m-9, .mx-9 { margin-left: 7.5rem !important; margin-right: 7.5rem !important; }
  .m-9, .my-9, .mt-9 { margin-top: 7.5rem !important; }
  .m-9, .my-9, .mb-9 { margin-bottom: 7.5rem !important; }

  /* Padding */
  .p-5, .px-5 { padding-left: 2rem !important; padding-right: 2rem !important; }
  .p-5, .py-5, .pt-5 { padding-top: 2rem !important; }
  .p-5, .py-5, .pb-5 { padding-bottom: 2rem !important; }

  .p-6, .px-6 { padding-left: 3rem !important; padding-right: 3rem !important; }
  .p-6, .py-6, .pt-6 { padding-top: 3rem !important; }
  .p-6, .py-6, .pb-6 { padding-bottom: 3rem !important; }

  .p-7, .px-7 { padding-left: 4rem !important; padding-right: 4rem !important; }
  .p-7, .py-7, .pt-7 { padding-top: 4rem !important; }
  .p-7, .py-7, .pb-7 { padding-bottom: 4rem !important; }

  .p-8, .px-8 { padding-left: 5.5rem !important; padding-right: 5.5rem !important; }
  .p-8, .py-8, .pt-8 { padding-top: 5.5rem !important; }
  .p-8, .py-8, .pb-8 { padding-bottom: 5.5rem !important; }

  .p-9, .px-9 { padding-left: 7.5rem !important; padding-right: 7.5rem !important; }
  .p-9, .py-9, .pt-9 { padding-top: 7.5rem !important; }
  .p-9, .py-9, .pb-9 { padding-bottom: 7.5rem !important; }

  /* Gaps */
  .gap-5, .row-gap-5, .column-gap-5 { gap: 2rem !important; }
  .gap-6, .row-gap-6, .column-gap-6 { gap: 3rem !important; }
  .gap-7, .row-gap-7, .column-gap-7 { gap: 4rem !important; }
  .gap-8, .row-gap-8, .column-gap-8 { gap: 5.5rem !important; }
  .gap-9, .row-gap-9, .column-gap-9 { gap: 7.5rem !important; }
}