:root > * {
    --md-primary-fg-color: #1D75BD;
    --md-accent-fg-color: #1D75BD;
    --md-primary-fg-color--light: #FF0000;
    --md-primary-fg-color--dark: #90030C;
    --md-default-bg-color: #f9f9f9;
    --md-code-bg-color: #EaEaEa;
}

body {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ4MCIgaGVpZ2h0PSI2NTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTczMS4yMDcgNjQ5LjgwMkM5MzUuNDg0IDY0Mi4xNCAxNDgwIDMzNy4zMjUgMTQ4MCAxODAuODg4YzAtMTU2LjQzOC0zMDkuNzQ0LTM2LjA1NS03MjAtMzYuMDU1UzAtMTc0LjQ4MyAwIDEzNS4xNDRjMCAzMDkuNjI3IDUyNi45MyA1MjIuMzIgNzMxLjIwNyA1MTQuNjU4eiIgZmlsbD0iI0Y2RjhGQSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
    background-position-x: 20vw;
    background-position-y: -10vh;
    background-repeat: no-repeat;
    background-size: cover;


}

.bg-screen {
    background-color: var(--md-primary-fg-color);
    width: 100%;

}

.md-main__inner,
.homepage .md-content__inner,
.homepage .md-content {
    margin: 0 0 0 0;
    padding: 0 0 0 0;

}

.md-content__inner:before {
    background-color: var(--md-primary-fg-color);
}

.md-grid {
    max-width: 100%;
}



.bg-screen * {
    color: #FFFFFF !important;
}
.bg-screen p {
    font-size: 15px;
        font-weight: 400;

}
h1.hero {

    font-size: clamp(24px, 6vw, 38px);
    font-style: normal;
    font-weight: 800;
    line-height: 50px;

      white-space: normal;     /* normaler Zeilenumbruch erlaubt */
  word-break: keep-all;    /* nicht mitten im Wort umbrechen */
  overflow-wrap: normal;   /* keine Notfall-Umbrüche */

}

h1.hero {
    margin-bottom: 0;
}

h2.hero {
    margin-top: 0px;

}

.md-header {
    padding-top: 15px;
    padding-bottom: 15px;
}

.md-grid {
  max-width: 1320px;
}

.md-main .md-grid {
    max-width: initial;
}




.header-title, .md-header__title {
    font-size: 28px;
    font-weight: 700;
}


.md-header__title {
    margin-left: 0 !important;
}

.md-header--shadow {
    background-color: var(--md-default-bg-color);
}

.md-header--shadow .md-header__title span.light{
    color: var(--md-accent-fg-color);
}

.md-header--shadow .md-header__title span.dark{
    color: #424043FF;
}


.md-header {

     transition: background-color 200ms linear;
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;

}

a.md-logo > img {
    width: 35px !important;
    height: 35px !important;
}

.logo {
    display: none !important;
}

.md-header--shadow .logo {
    display: initial !important;
}

.logo-white {
    display: initial !important;
}

.md-header--shadow .logo-white {
    display: none !important;
}


.md-content__inner:before {
    display: none;
}

.md-tabs__link {
 margin: 0 40px 0 0 !important;
    font-size: 17px;
    font-weight: 600;
}

.md-header--shadow .md-tabs__item {
        color: #424043FF;

}

.md-header--shadow .md-tabs__item--active {
        color: var(--md-accent-fg-color);

}

@media (max-width: 1219px) {
  #nav {
    display: none;
  }
}
.banner-wrapper {
  margin-top: 50px;
  position: relative;
  display: inline-block;
}

.images {
  display: flex;
     flex-wrap: wrap;
     justify-content: center;
  gap: 1rem;
}

.images img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Banner */
.banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  background: crimson;
  color: white;
  padding: 10px 75px;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  z-index: 3;
  white-space: nowrap;
  pointer-events: none;
}

.footer-links {
    font-size: 13px;
    margin-top: auto;
    margin-bottom: auto;

}

.footer-links a {
    margin-right: 25px;
}

.md-typeset .md-button--stretch { width: 100%;  max-width: 25vw}

.md-typeset .md-button--list {
    width: 15em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 5px;

}

.md-typeset .md-button--accent {
    background-color: var(--md-primary-fg-color);
    border-color: var(--md-primary-fg-color);
    color: var(--md-primary-fg-color)
}

.md-typeset .md-button--accent:hover, .md-typeset .md-button--accent:focus {
    background-color: var(--md-primary-fg-color);
    border-color: var(--md-primary-bg-color);
    color: var(--md-primary-bg-color)
}

.md-typeset .md-button--sized {
    width: 25ch;
    text-wrap: nowrap;
    text-align: center;
    margin-right: 15px;
    margin-bottom: 15px;
}



.md-clipboard {
    --md-default-fg-color--lightest: var(--md-default-fg-color--light);
    transition: transform 0.2s;
}

:hover>.md-clipboard {
    --md-default-fg-color--light: #000000 !important;
    background-color: var(--md-default-bg-color);
    animation: pulse 0.4s ease;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

div.side-by-side {
    display:flex;
    flex-wrap: wrap;
}



div.side-by-side > div:nth-child(1) {
    flex: 1 1 50%;

}

div.side-by-side > div:nth-child(2) {
    flex: 1 0 min-content;
    justify-items: center;
}