/*
body::before {
  content: "XS";
  color: red;
  font-size: 2rem;
  font-weight: bold;
  position: fixed;
  top: 100px;
  right: 0;
}

.box {
  background-color: lightblue;
  border: 1px solid blue;
  min-height: 50px;
  font-size: 2rem;
}

@media (min-width: 576px) {
  body::before {
    content: "SM";
  }
}

@media (min-width: 768px) {
  body::before {
    content: "MD";
  }
}

@media (min-width: 992px) {
  body::before {
    content: "LG";
  }
}

@media (min-width: 1200px) {
  body::before {
    content: "XL";
  }
}

@media (min-width: 1400px) {
  body::before {
    content: "XXL";
  }
}
*/

#back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 22px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  z-index: 9999;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

/* Icon als Hintergrund des Pseudo-Elements (sorgt für saubere Skalierung) */
#back-to-top::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url('../img/arrow_down.svg'); /* oder '/assets/img/arrow-down.svg' */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: rotate(180deg); /* falls SVG nach oben zeigen soll */
}

#back-to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#back-to-top:focus,
#back-to-top:hover {
  background: #222;
  outline: none;
}

/* Schriftarten */
@font-face {
  font-family: 'IBM-Plex-Mono-Bold';
  src: url(../fonts/ibm-plex-mono-bold.woff2) format(woff2);
}

@font-face {
  font-family: 'IBM-Plex-Mono-Normal';
  src: url(../fonts/ibm-plex-mono-normal.woff2) format(woff2);
}

#logo {
  width: 250px;
}

#content {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}

/* Klassen */

p {
  font-family: 'IBM-Plex-Mono-Normal';
  font-size: 15.5px;
  font-weight: 400;
}

p+p:before {
  margin-bottom: 10.5px;
  content: url(../img/icon_placeholder.svg);
  width: 50px;
  display: block;
}

ul {
  margin: 23px, 0, 23px, 23px;
  font-family: 'IBM-Plex-Mono-Normal';
  font-size: 15.5px;
  font-weight: 400;
}



.navbarlinks {
  font-family: 'IBM-Plex-Mono-Bold';
  list-style: none;
  font-size: 15.5px;
  font-weight: 500;
}

.active {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

nav ul li a {
  text-decoration: none;
  color: black;
}

.offcanvas-body ul li a {
  text-decoration: none;
  color: white;
}

.container-content {
  width: 100%;
}

@media (min-width: 768px) {
  .container-content {
    width: 75%;
  }
}

@media (min-width: 1400px) {
  .container-content {
    width: 50%;
  }
}

.container-content-about {
  width: 100%;
}

@media (min-width: 768px) {
  .container-content-about {
    width: 95%;
  }
}

@media (min-width: 1400px) {
  .container-content-about {
    width: 80%;
  }
}

.container-content-expertise {
  width: 100%;
}

@media (min-width: 768px) {
  .container-content-expertise {
    width: 95%;
  }
}

@media (min-width: 1400px) {
  .container-content-expertise {
    width: 70%;
  }
}

.container-content-team {
  width: 100%;
}

@media (min-width: 768px) {
  .container-content-team {
    width: 90%;
  }
}

@media (min-width: 1400px) {
  .container-content-team {
    width: 60%;
  }
}

.container-content-news {
  width: 100%;
}

@media (min-width: 576px) {
  .container-content-news {
    width: 90%;
  }
}

@media (min-width: 1400px) {
  .container-content-news {
    width: 75%;
  }
}

.container-content-jobs {
  width: 100%;
}

@media (min-width: 576px) {
  .container-content-jobs {
    width: 90%;
  }
}

@media (min-width: 1400px) {
  .container-content-jobs {
    width: 75%;
  }
}

.text-bold {
  font-family: 'IBM-Plex-Mono-Bold';
  font-size: 23.25px;
  font-weight: 500;
}

.text-bold-small {
  font-family: 'IBM-Plex-Mono-Bold';
  font-size: 15.5px;
  font-weight: 500;
}

.text-normal {
  font-family: 'IBM-Plex-Mono-Normal';
  font-size: 15.5px;
  font-weight: 400;
}

.text-footer {
  font-family: 'IBM-Plex-Mono-Normal';
  font-size: 12.5px;
  font-weight: 400;
}

footer ul li::after {
  margin: auto .5em;
  content: "|";
}

footer ul li:last-child:after {
  margin: auto 0;
  content: "";
}

.circle-animated-hover {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
  /* Start bei unten */
}

.circle circle {
  fill: none;
  stroke: black;
  stroke-width: 1;
  stroke-dasharray: 113;
  /* Umfang: 2 * π * r ≈ 113 für r = 18 */
  stroke-dashoffset: 113;
  transition: stroke-dashoffset 0.5s ease;
}

.circle-animated-hover:hover circle {
  stroke-dashoffset: 0;
}

.circle-rechts {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
  /* Start bei unten */
}

.circle-rechts circle {
  fill: none;
  stroke: black;
  stroke-width: 1;
  stroke-dasharray: 113;
  /* Umfang: 2 * π * r ≈ 113 für r = 18 */
  stroke-dashoffset: 113;
  transition: stroke-dashoffset 0.5s ease;
}

.content-footer {
  width: 100%;
}

@media (min-width : 1400px) {
  .content-footer {
    width: 70%;
  }
}

#navbar-lang ul li:first-child:after {
  margin: auto .5em;
  content: "|";
  font-weight: 700;
}

#navbar-lang ul li {
  font-family: 'IBM-Plex-Mono-Normal';
  font-size: 15.5px;
  cursor: pointer;
}

#footer-info-en ul li,
#footer-info-de ul li {
  list-style-type: square;
}

#footer-info-en h1,
#footer-info-de h1 {
  font-family: 'IBM-Plex-Mono-Normal';
  font-size: 15.5px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 26px;
  filter: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
  color: #000 !important;
  text-transform: normal;
}

#footer-info-en ul li::marker,
#footer-info-de ul li::marker {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  text-indent: 0px !important;
  text-align: start !important;
  text-align-last: auto !important;
}

#content h1 {
  font-family: 'IBM-Plex-Mono-Normal';
  font-size: 15.5px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 26px;
  filter: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
  color: #000 !important;
  text-transform: normal;
}

#content h2 {
  font-family: 'IBM-Plex-Mono-Bold';
  font-size: 15.5px;
  font-weight: 500;
  margin-top: 26px;
  margin-bottom: 20px;
  filter: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
  color: #000 !important;
}

.content-topics {
  width: 100%;
}

@media (min-width : 992px) {
  .content-topics {
    width: 70%;
  }
}

@media (min-width : 1400px) {
  .content-topics {
    width: 55%;
  }
}

.content-topics ul li {
  list-style-type: "— ";
}

.content-topics h2 {
  font-family: 'IBM-Plex-Mono-Bold';
  font-size: 15.5px;
  font-weight: 500;
  margin-top: 26px;
  margin-bottom: 20px;
  filter: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
  color: #000 !important;
}

.content-topics i {
  font-family: 'IBM-Plex-Mono-Normal';
  font-size: 15.5px;
  font-weight: 400;
  margin-bottom: 15px;
}

.svg line,
.svg path,
.svg polygon {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 1.5s linear forwards;
  animation-timing-function: ease-out
}

@keyframes dash {
  to {
    stroke-dashoffset: 0
  }
}

#hero svg #text {
  -webkit-animation: 2s ease 0s normal forwards 1 fadein;
  animation: 1.5s ease 0s normal forwards 1 fadein
}

#hero .grafik {
  height: 60vh;
}

@media (min-width: 576px) {
  #hero .grafik {
    height: 75vh;
  }
}

@keyframes fadein {
  0% {
    opacity: 0
  }

  66% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

#hero {
  height: 85vh;
  margin: 0 30px;
}

.platzhalter-index-zuTop {
  height: 15vh;
}

.platzhalter-index-zuIntro {
  height: 75px;
}

@media (min-width: 576px) {
  .platzhalter-index-zuIntro {
    height: 150px;
  }
}

.platzhalter-index-zuUeberschrift {
  height: 100px;
}

.platzhalter-topics-zuNavbar {
  height: 20vh;
}

@media (min-width: 576px) {
  .platzhalter-topics-zuNavbar {
    height: 150px;
  }
}

.platzhalter-footer-zuTop {
  height: 100px;
}

@media (min-width: 576px) {
  .platzhalter-footer-zuTop {
    height: 150px;
  }
}

#content #topics #topics-item {
  width: 44%;
}

@media (min-width: 576px) {
  #content #topics #topics-item {
    width: 30%;
  }
}

#content #topics svg {
  height: 180px;
}

.bild-about {
  width: 25%;
}

.text-about {
  width: 40%;
}

.bild-expertise {
  width: 15%;
}

.text-expertise {
  width: 40%;
}

.bild-team {
  width: 48%;
}

.text-team {
  width: 48%;
}

@media (max-width: 575px) {
  .about-paragraph {
    flex-direction: column;
    justify-content: center;
  }

  .text-about,
  .text-expertise,
  .text-team {
    width: 100%;
  }

  .bild-about,
  .bild-expertise {
    width: 50%;
    align-self: center;
  }

  .bild-team {
    width: 80%;
    align-self: center;
  }
}

.text-underline {
  font-family: 'IBM-Plex-Mono-Normal';
  font-size: 15.5px;
  font-weight: 400;
  text-decoration: underline;
  color: black;
  text-decoration-color: black;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

#introtext-team-1 {
  text-align: center;
  width: 100%;
  justify-self: center;
}

@media (min-width: 576px) {
  #introtext-team-1 {
    text-align: center;
    width: 100%;
    justify-self: center;
  }
}

@media (min-width: 768px) {
  #introtext-team-1 {
    text-align: center;
    width: 70%;
    justify-self: center;
  }
}

@media (min-width: 1400px) {
  #introtext-team-1 {
    text-align: center;
    width: 70%;
    justify-self: center;
  }
}

@media (min-width: 576px) {
  #carouselExample {
    width: 100%;
  }
}

@media (min-width: 768px) {
  #carouselExample {
    width: 80%;
  }
}

@media (min-width: 992px) {
  #carouselExample {
    width: 60%;
  }
}

.news-date {
  font-size: 20.15px;
  font-family: 'IBM-Plex-Mono-Bold';
  font-weight: 500;
  border-bottom: 1px solid black;
  padding-bottom: 10px;
}

#news {
  width: 100%;
}

@media (min-width: 576px) {
  #news {
    width: 48%;
  }
}

#job-opportunities {
  border-top: 1px solid black;
}

.cookiealert {
  font-family: 'IBM-Plex-Mono-Normal';
  font-weight: 400;
}