/*
Theme Name: YOOtheme Child
Theme URI: https://yootheme.com
Description: Child Theme für YOOtheme Pro
Author: medienmatrixx
Author URI: https://medienmatrixx.de
Template: yootheme
Version: 2.2.1
*/


/* =========================================
   ROOT VARIABLES / DESIGN TOKENS
   ========================================= */
:root {
  --md-color0: #4000ff;        /* blau – primär */
  --md-color0-50: #d3c4ff;     /* blau hell */
  --md-color0-80: #7b4eff;     /* blau mittel */
  --md-color1: #000;           /* schwarz – text */
  --md-color2: #fff;           /* weiß – hintergrund */
  --md-color3: #f6f6f6;        /* grau hell – flächen */
  --md-color5: #7f7f7f;        /* grau – sekundärtext */
  --md-color4: #bfff00;        /* grün – akzent */
  --md-color4-20: #ebffb1;     /* grün hell – hinterlegung */

  --md-color7: #f8f7fc;        /* blau hell – akzent 2 */
  --md-color8: #3e678d;        /* kaltes grau blau für headline animation */
  --md-color9: #00ff00;        /* kaltes grün simuliert computerschrift*/
  --md-color10: #91A4B7	       /* kaltes eis-blau*/
	
  --noto-font: 'Noto Serif';
  --space-font: 'Space Mono';
}
/* =========================================
   ___END ROOT VARIABLES / DESIGN TOKENS
   ========================================= */

/* =========================================
   GLOBAL BASE SETTINGS
   ========================================= */
.uk-section {
    padding-top: 0px !important;
}
::selection {
  background: var(--md-color4) !important;
  color: var(--md-color1) !important;
}
span.clientsname {
  color: var(--md-color5) !important;
}
body.custom-cursor-active {
  cursor: none;
}
/* =========================================
   ___END GLOBAL BASE SETTINGS
   ========================================= */

/* =========================================
   GLOBAL UIKIT / FRAMEWORK OVERRIDES
   ========================================= */
.uk-inline-clip {
  .uk-overlay-default {
    background-color: color-mix(in srgb, var(--md-color3) 80%, transparent) !important;
    border-radius: 50%;
  }
}
/* -----------------------------------------
   HEADING UND TEXT
   ----------------------------------------- */
.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-h5,
.uk-h6 {
	line-height: normal !important;
}
.uk-heading-small {
    .md-text-highlight {
        display: inline-block;
        margin-bottom: .25em !important;
    }
}
.uk-text-lead,
.uk-text-large {
  font-size: clamp(1rem, 0.494vw + 0.907rem, 1.5rem) !important;
}
/* -----------------------------------------
   END HEADING UND TEXT
   ----------------------------------------- */

/* -----------------------------------------
   SECTIONS
   ----------------------------------------- */
.uk-section-default {
  background-color: var(--md-color2) !important;
}
.uk-section-muted {
  background-color: var(--md-color3) !important;
}
.uk-section-primary {
  background-color: var(--md-color0) !important;
}
.uk-section-secondary {
  background-color: var(--md-color7) !important;
}
.section-border-top {
    border-top: 4px solid var(--md-color0);
}
/* -----------------------------------------
   END SECTIONS
   ----------------------------------------- */

/* -----------------------------------------
   BUTTONS
   ----------------------------------------- */
.uk-button {
  font-family: var(--space-font) !important;
  font-size: 16px !important;
  padding: 10px 20px !important;
  background-size: 250% 250%;
  background-position: right;
  background-repeat: no-repeat;
  transition: background-position .35s ease-out, color .25s ease-out !important;
}
.uk-button-default {
  color: var(--md-color1) !important;
  border: 2px solid var(--md-color1) !important;
  background-color: var(--md-color2) !important;
  background-image: linear-gradient(
    120deg,
    var(--md-color1) 50%,
    transparent 50%
  );
  &:hover {
    background-position: left;
    color: var(--md-color2) !important;
    transition: background-position .9s cubic-bezier(.4,0,.2,1), color .6s ease;
  }
}
.uk-button-secondary {
  color: var(--md-color8) !important;
  border: 2px solid var(--md-color8) !important;
  background-color: transparent !important;
  background-image: linear-gradient(
    120deg,
    var(--md-color8) 50%,
    transparent 50%
  );
  &:hover {
    background-position: left;
    color: var(--md-color2) !important;
  }
}
.uk-button-tertiary {
  color: var(--md-color2) !important;
  border: 2px solid var(--md-color2) !important;
  background-color: var(--md-color1);
  background-image: linear-gradient(
    120deg,
    var(--md-color4) 50%,
    transparent 50%
  );
  transition: background-position .35s ease-out,
              color .25s ease-out,
              border-color .25s ease-out;
  &:hover {
    background-position: left;
    color: var(--md-color1) !important;
    border-color: var(--md-color4) !important;
  }
}
.uk-button-conversion {
  color: var(--md-color1) !important;
  border: 2px solid var(--md-color2) !important;
  background-color: var(--md-color2) !important;
  background-image: linear-gradient(
    120deg,
    var(--md-color0) 50%,
    transparent 50%
  );
  @media (max-width: 639px) {
    width: 100%;
  }
  &:hover {
    background-position: left;
    color: var(--md-color2) !important;
    border: 2px solid var(--md-color0) !important;
  }
}
@media (hover: none) and (pointer: coarse) {
  .uk-button-default:active {
    background-position: left;
    color: var(--md-color2) !important;
  }
  .uk-button-secondary:active {
    background-position: left;
    color: var(--md-color2) !important;
  }
  .uk-button-tertiary:active {
    background-position: left;
    color: var(--md-color1) !important;
    border-color: var(--md-color4) !important;
  }
  .uk-button-conversion:active {
    background-position: left;
    color: var(--md-color2) !important;
  }
}
.mema-cta-video .uk-button-text {
        font-size: 14px;
        color:  var(--md-color2) !important;
}
.md-button .uk-button {
  font-family: var(--space-font) !important;
}
.md-button .uk-button-text:hover {
  color: var(--md-color0);
}
/* -----------------------------------------
   END BUTTONS
   ----------------------------------------- */

/* -----------------------------------------
   CARD
   ----------------------------------------- */
.uk-card-default {
	background-color: var(--md-color8) !important;
}
.uk-card-primary {
  color: var(--md-color1) !important;
  background-color: transparent !important;
  border: 1px solid var(--md-color8) !important;
  backdrop-filter: blur(8px);
}
.uk-card-secondary {
  background-color: var(--md-color7) !important;

  .el-content {
    color: var(--md-color1) !important;
  }
}
.uk-card-tertiary {
  background-color: transparent !important;
  border: 1px solid var(--md-color2) !important;

  .el-content {
    color: var(--md-color1) !important;
  }
}
/* -----------------------------------------
   END CARD
   ----------------------------------------- */

/* -----------------------------------------
   TILE
   ----------------------------------------- */
.uk-tile-primary {
    background: var(--md-color1) !important;
        .el-title {
		  color: var(--md-color2) !important;
	    }
}
/* -----------------------------------------
   END TILE
   ----------------------------------------- */

/* -----------------------------------------
   MODAL
   ----------------------------------------- */
.uk-modal {
	background:rgba(255,255,255,.6) !important;
}
.uk-modal-body {
  display: flow-root;
  padding: 20px 20px !important;
}
@media (min-width: 640px) {
  .uk-modal-body {
    padding: 26px 20px !important;
  }
}
.uk-modal-dialog {
  border: 2px solid var(--md-color1);
  background-color: var(--md-color2) !important;
  color: var(--md-color1) !important;
  p {
    color: var(--md-color1);
  }
  a:not(.uk-button) {
    color: var(--md-color5) !important;
  }
}
/* -----------------------------------------
   END MODAL
   ----------------------------------------- */

/* =========================================
   ___END GLOBAL UIKIT / FRAMEWORK OVERRIDES
   ========================================= */

/* =========================================
   TYPOGRAPHY / FONT HELPERS
   ========================================= */
p.clientlist {
  a:nth-of-type(odd) {
    background: linear-gradient(
      90deg,
      var(--md-color1) 0%,
      var(--md-color8) 35%,
      var(--md-color1) 50%,
      var(--md-color8) 65%,
      var(--md-color1) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
  }
  a:nth-of-type(even) {
    opacity: 0.5;
    background: linear-gradient(
      90deg,
      var(--md-color1) 0%,
      var(--md-color8) 35%,
      var(--md-color1) 50%,
      var(--md-color8) 65%,
      var(--md-color1) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
  }
  a:hover {
    opacity: 1;
    -webkit-text-fill-color: var(--md-color0);
    background: none;
  }
}
.md-font-space {
  font-family: var(--space-font) !important;
  font-weight: 400 !important;
}
.md-font-noto {
  font-family: var(--noto-font) !important;
  font-weight: 500 !important;
}
.md-text-highlight {
  color: var(--md-color2);
  background: var(--md-color0) !important;
  padding: 0 0.5em 0.1em 0.5em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.md-text-highlight-green {
  padding: 0.2em 0.6em;
  background: var(--md-color4) !important;
  color: var(--md-color1);
  line-height: 2.25;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.md-big-text {
  word-spacing: -0.3em !important;
  font-weight: 900 !important;
  line-height: 1.67;
}
.md-text-space-top {
	margin-top: -0.5em;
}
.md-text-space-0
 {
    margin-top: 0;
}
.text-strong {
  font-weight: 700 !important;
}
.text-lowercase,
.text-lowercase p {
  text-transform: lowercase !important;
}
.text-xsmal {
  font-size: 12px;
  line-height: 1.25;
  display: block;
}
.font-dark {
  color: var(--md-color1) !important;
}
.font-light,
.font-light * {
  color: var(--md-color2) !important;
}
.font-grey {
  color: var(--md-color5) !important;
}
.link-dark-underline {
  color: var(--md-color1);
  text-decoration: underline;
}
a.link-dark-underline:hover {
  color: var(--md-color0) !important;
  text-decoration: underline;
}
.md-text-padding-dark {
  padding: 0em 0.6em;
  color: var(--md-color1);
  box-decoration-break: clone;
}
.md-text-padding-light {
  padding: 0em 0.6em;
  color: var(--md-color2);
  box-decoration-break: clone;
}
.md-hyphens {
  hyphens: auto;
}
.text-green-light {
    color: var(--md-color4-20) !important;
}
/* =========================================
   ___END TYPOGRAPHY / FONT HELPERS
   ========================================= */

/* =========================================
   HEADER / LOGO ANIMATION
   ========================================= */
.md-logo-image {
  padding: 1em;
  margin-left: auto;
  width: 10em;
}
.md-logo-rotate {
  animation: rotateBackground 20s linear infinite;
}
@keyframes rotateBackground {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.md-hero-text {
  background: linear-gradient(
    90deg,
    var(--md-color1) 0%,
    var(--md-color8) 50%,
    var(--md-color1) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;

  &.w60 {
    max-width: 60%;
    margin: 0 auto !important;
    text-align: left;
  }
}
.md-hero-text-light {
  background: linear-gradient(
    90deg,
    var(--md-color2) 0%,
    var(--md-color4-20) 50%,
    var(--md-color2) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;

  &.w60 {
    max-width: 60%;
    margin: 0 auto !important;
    text-align: left;
  }
}
@keyframes shimmer {
  to { background-position: 200% center; }
}
.md-fadein,
.md-fadein-delayed {
  opacity: 0;
}
.md-fadein.md-inview,
.md-fadein-delayed.md-inview {
  animation: fadeInHero 2s ease-out forwards;
  animation-delay: 0.75s;
}
.md-fadein.md-inview {
  animation-delay: 0s;
}
.md-fadeout {
  position: relative;
}
.md-fadeout::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 100%
  ) !important;
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 2s ease;
}
.md-fadeout.md-outview::after {
  opacity: 1 !important;
}
@keyframes fadeInHero {
  from {
    opacity: 0;
    filter: blur(12px);
  }
  to {
    opacity: 1;
	filter: blur(0px);
  }
}
/* =========================================
   ___END HEADER / LOGO ANIMATION
   ========================================= */

.md-services {
  background: var(--md-color3) !important;
}

/* =========================================
   MD PANELSLIDER
   ========================================= */
.md-panel-slider {
  .el-title.uk-h6 {
    line-height: 1.75em !important;
  }
  .uk-dotnav {
    > * > * {
      width: 10px;
      height: 10px;
      background: transparent;
      border: 1px solid var(--md-color0);
    }
    > * > :hover,
    > * > :active {
      background: var(--md-color0) !important;
      border-color: var(--md-color0);
    }
  }
}
.md-panelslider-tag {
  background-color: var(--md-color1);
  color: var(--md-color2);
  padding: 0 .5em .175em .5em;
  line-height: 2.5;
  border-radius: 0 0.75em;
  white-space: nowrap;

  &::before {
    content: "#";
    margin-right: .25em;
  }
}
.md-tags-block {
  p {
    margin: -3px !important;
    white-space: nowrap;
  }
  .md-panelslider-tag {
    display: inline !important;
    line-height: 0 !important;
  }
  &.uk-margin {
    margin-bottom: 0 !important;
  }
}
.md-cs-panelslider-tag {
  text-transform: lowercase;
  white-space: nowrap;
  padding: 0 .4em;
  border-top-left-radius: 9px;
  border-bottom-right-radius: 9px;
  background-color: var(--md-color2);
  color: var(--md-color1);
  line-height: 1.75 !important;
}
/* =========================================
   END MD PANELSLIDER
   ========================================= */

/* =========================================
   MD CARDS
   ========================================= */
.md-card {
    .md-text-highlight {
        line-height: 1.75;
    }

    .uk-button-default {
        padding: 0 !important;
        font-size: 14px !important;

        @media (min-width: 1200px) {
            display: none !important;
        }
    }
}
/* =========================================
   ___END MD CARDS
   ========================================= */

/* =========================================
   ELEMENT COMPONENTS
   ========================================= */
.img-overlay-bluegrey .uk-card-media-top {
    position: relative;
    overflow: hidden;
}
.img-overlay-bluegrey .uk-card-media-top::after {
    content: "";
    position: absolute;
    inset: 0;

    /* Blue-Grey Verlauf */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 20%,
        var(--md-color7) 100%
    );

    pointer-events: none;
}
/* =========================================
   END ELEMENT COMPONENTS
   ========================================= */

/* =========================================
   SERVICE SELECTION
   ========================================= */
.md-service-selection {
    .el-item {
        position: relative;
        height: 100%;
        border: 0 solid var(--md-color2);
        transition: box-shadow 0.4s ease;
        overflow: hidden;
        /* Platz für den Button am Kartenende reservieren */
        .uk-card-body {
            display: flex !important;
            flex-direction: column;
            align-items: stretch;
            padding: 0 0 calc(52px + 2em) !important;
        }
        /* Headline und Texte untereinander */
        .uk-card-body > .uk-grid {
            display: flex !important;
            flex-direction: column;
            margin: 0 !important;
            > * {
                width: 100% !important;
                padding-left: 0 !important;
            }
        }
        /* Blaue Headline bündig zum Rahmen */
        .el-title {
            width: 100%;
            margin: 0 !important;
        }
        /* Übrige Texte mit Innenabstand */
        .uk-text-small {
            width: 100%;
            box-sizing: border-box;
            margin: 0 !important;
            padding: 0 1em !important;
        }
        /* Button immer am unteren Kartenrand */
        .uk-card-body > .uk-grid > :last-child > :last-child {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            margin: 0 !important;
            padding: 0 1em 1em !important;
        }
        /* Hoverrahmen */
        &::after {
            content: "";
            position: absolute;
            inset: 0;
            border: 2px solid var(--md-color0);
            pointer-events: none;
            clip-path: inset(0 100% 100% 0);
        }
        &:hover {
            box-shadow:
                0 1px 2px rgba(14, 30, 37, 0.35),
                0 4px 10px rgba(14, 30, 37, 0.12);
        }
        &:hover::after {
            transition: ease-in 0.2s;
            animation: md-border-run 0.6s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
        }
    }
}
/* Eine Spalte bis 639 px */
@media (max-width: 639px) {
    .md-service-selection {

        &.uk-grid > *,
        > .uk-grid > * {
            width: 100% !important;
        }
    }
}
/* Zwei Spalten ab 640 px */
@media (min-width: 640px) {
    .md-service-selection {
        &.uk-grid > *,
        > .uk-grid > * {
            width: 50% !important;
        }
    }
}
/* Panelslider-Tags bis 959 px ausblenden */
@media (max-width: 959px) {
    .md-service-selection {
        .el-content {
            display: none !important;
        }
    }
}
/* Vier Spalten ab 1200 px */
@media (min-width: 1200px) {
    .md-service-selection {
        &.uk-grid > *,
        > .uk-grid > * {
            width: 25% !important;
        }
    }
}
@keyframes md-border-run {
    0% {
        clip-path: inset(0 0 100% 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

/* =========================================
   END SERVICE SELECTION
   ========================================= */
/* =========================================
   KNOWLEDGE CENTER
   ========================================= */
.knowledge-center-side-navbar {
    .uk-grid {
        padding: 1.75em 1em;
        background: color-mix(in srgb, var(--md-color2) 40%, transparent);
        border: 1px solid var(--md-color8);

        box-shadow: 0 1px 2px rgb(14 30 37 / .35),0 4px 10px rgb(14 30 37 / .12);
    }
    a,
    .el-title {
        font-weight: 400;
        color: var(--md-color8) !important;
        transition: color .2s ease;
    }
    a:hover,
    a:hover .el-title {

        color: var(--md-color1) !important;
    }
}
.knowledge-center-content {
    a {
        color: var(--md-color1);
    }
        a:hover {
        text-decoration: underline;
    }
}
.knowledge-center-navigation {
        padding: 1.75em 1em;
        background: color-mix(in srgb, var(--md-color2) 40%, transparent);
        border: 1px solid var(--md-color8);
        box-shadow: 0 1px 2px rgb(14 30 37 / .35),0 4px 10px rgb(14 30 37 / .12);
    }
/* =========================================
   END KNOWLEDGE CENTER
   ========================================= */

/* =========================================
   TOOLS SELECTION
   ========================================= */
@media (min-width:1200px) {
  .md-tools-selection {
    .el-item {
      position: relative;
      border: 0 solid var(--md-color2);
      transition: box-shadow .4s ease;
      overflow: hidden;
      &::after {
        content: "";
        position: absolute;
        inset: 2px;
        border: 2px solid var(--md-color2);
        pointer-events: none;
        clip-path: inset(0 100% 100% 0);
      }
      &:hover {
        box-shadow: 0 1px 2px rgba(14,30,37,.35), 0 4px 10px rgba(14,30,37,.12);
      }
      &:hover::after {
        transition: ease-in .2s;
        animation: md-border-run .6s cubic-bezier(.65,.05,.36,1) forwards;
      }
    }
  }
}
@keyframes md-border-run {
  0% { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0 0); }
}
/* =========================================
   END TOOLS SELECTION
   ========================================= */

/* =========================================
   SERVICES BULLETS COMPONENT
   ========================================= */
.uk-panel ul.md-services-bullets,
ul.md-services-bullets {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.uk-panel ul.md-services-bullets li,
ul.md-services-bullets li {
  list-style: none !important;
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
}
.uk-panel ul.md-services-bullets li::marker,
ul.md-services-bullets li::marker {
  content: none !important;
}
.uk-panel ul.md-services-bullets li::before,
ul.md-services-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 16px;
  height: 16px;
  background-image: url("/wp-content/uploads/2026/02/cs_after.png");
  background-size: contain;
  background-repeat: no-repeat;
}
ul.md-services-bullets li:last-child {
  margin-bottom: 0;
}
.md-services-grid .uk-card.uk-card-default {
  background: transparent !important;
  border: 1px solid var(--md-color1) !important;
  backdrop-filter: blur(8px);
}
/* =========================================
   ___END SERVICES BULLETS COMPONENT
   ========================================= */

/* =========================================
   REFERENCES COMPONENT
   ========================================= */
.md-sub-nav-ref .el-item .el-link::before {
  content: '#';
}
.md-sub-nav-ref .el-item .el-link {
  font-size: clamp(1rem, 0.494vw + 0.907rem, 1.5rem) !important;
  text-transform: lowercase;
  white-space: nowrap;
  padding: 0 .4em;
  border-top-left-radius: 9px;
  border-bottom-right-radius: 9px;
  background-color: var(--md-color1);
  color: var(--md-color2);
  line-height: 1.75 !important;
}
.md-sub-nav-ref .el-item .el-link:hover {
  background-color: var(--md-color0);
}
.md-ref-circle .el-image {
  border-radius: 50%;
  filter: grayscale(100%);
}
/* =========================================
   ___END REFERENCES COMPONENT
   ========================================= */

/* =========================================
   PROFILE GRID COMPONENT
   ========================================= */
.mema-team {
  img {
    border-radius: 100%;
  }
  p, .el-meta, .el-content {
    color: var(--md-color2) !important;
  }
  @media (max-width: 640px) {
    img {
      width: 50%;
      height: auto;
    }
  }

}
.profile-grid img.el-hover-image.uk-transition-fade:hover {
  opacity: 0.5;
}
.profile-grid .el-content,
.profile-grid img {
  padding: 0 1em;
  color: var(--md-color2);
}
.profile-grid .el-meta {
  padding: 0.5em 1em;
}
.profile-grid .el-item {
  border: 2px solid var(--md-color0);
}
.profile-grid .el-content.uk-panel.uk-text-small.uk-margin-small-top {
  padding-bottom: 1em;
}
/* =========================================
   ___END PROFILE GRID COMPONENT
   ========================================= */



/* =========================================
   SECTION MEMA STORY CORRECTIONS
   ========================================= */
.mema-story .uk-background-norepeat {
    background-size: auto 50% !important;
    background-position: center 75% !important;
}
@media (min-width: 639px) {
    .mema-story .uk-background-norepeat {
        background-size: auto 60% !important;
        background-position: center 40% !important;
    }
}
/* =========================================
   END SECTION MEMA STORY CORRECTIONS
   ========================================= */

/* =========================================
   KNOWLEDGE CENTER
   ========================================= */
.knowledge-center {
    .uk-accordion-title,
    .uk-accordion-title:hover {
        padding: 0.75em;
        background: var(--md-color1);
        color: var(--md-color9) !important;
    }
    .uk-accordion-icon {
        color: var(--md-color9) !important;
    }
    h3,
	h4,
    a {
        color: var(--md-color9) !important;
    }

    a:hover {
		color: var(--md-color9);
        text-decoration: underline;
    }
    .uk-accordion-content {
        font-family: monospace;
        padding: 1em;
        color: var(--md-color9);
        background: var(--md-color1);
    }
    .uk-open {
        background: var(--md-color1);
    }
    svg {
        width: 1em !important;
    }
    .uk-panel {
        border-top: 2px solid var(--md-color9);
        padding-top: 2em;
    }
}
.knowledge-center.uk-accordion-default > :nth-child(n+2) {
    margin-top: 0;
}
.knowledge-center.uk-accordion-default > *:nth-child(n+2) {
    padding-top: 0;
    border-top: 1px solid #000;
}
/* =========================================
   END KNOWLEDGE CENTER
   ========================================= */

/* =========================================
   MEDIENMATRIXX STYLEGUIDE (mema_sg)
   ========================================= */
.mema_sg{
  .uk-card-default{
    background:var(--md-color2)!important;
    border-left:1px solid var(--md-color1);
  }
  .uk-nav-default{
    >li{
      >a{
        color:var(--md-color0-50);
        font-weight:700;
        &:hover{
          color:var(--md-color1);
        }
      }
      &.uk-active>a{
        color:var(--md-color1);
      }
    }
  }
  &.uk-accordion{
    >.el-item{
      margin-top:0!important;
      padding-top:0!important;
      >.uk-accordion-title{
        padding-left:0.51em;
        line-height:3;
      }
      &.uk-open>.uk-accordion-title{
        border-left:1px solid var(--md-color1);
        border-right:1px solid var(--md-color1);
      }
      >.uk-accordion-content{
        border-left:1px solid var(--md-color1);
        border-right:1px solid var(--md-color1);
        padding:1em;
        margin:0;
      }
    }
    >.el-item:last-child{
      >.uk-accordion-content{
        border-bottom:1px solid var(--md-color1);
      }
    }
    .uk-accordion-icon{
      padding-right:0.5em;
    }
  }
}
/* =========================================
   END MEDIENMATRIXX STYLEGUIDE (mema_sg)
   ========================================= */


/* =========================================
   COOKIE / COMPLIANZ COMPONENT
   ========================================= */

/* -----------------------------------------
   Banner + Manage Button
   ----------------------------------------- */
#cmplz-manage-consent .cmplz-manage-consent,
.cmplz-cookiebanner.cmplz-show{
  background-color:var(--md-color0)!important;
  color:var(--md-color2)!important;
  border-radius:0!important;
  border:transparent!important;
  min-width:50px!important;
  right:16px!important;
}
.cmplz-cookiebanner .cmplz-title{
  color:var(--md-color2)!important;
  font-weight:700!important;
}
/* -----------------------------------------
   Banner Links
   ----------------------------------------- */
.cmplz-cookiebanner .cmplz-links{
  ul{
    padding-left:0!important;
    margin-left:0!important;
    list-style:none!important;
  }
  li{
    margin-left:0!important;
    margin-bottom:0!important;
  }
  a,
  a.cmplz-link,
  a:visited,
  a:hover,
  a:focus{
    color:var(--md-color2)!important;
    text-decoration:underline!important;
  }
}
/* -----------------------------------------
   Banner Content
   ----------------------------------------- */
.cmplz-cookiebanner{
  .cmplz-message,
  .cmplz-close,
  .cmplz-description-functional,
  .cmplz-category-title{
    color:var(--md-color2)!important;
    font-size:14px!important;
    line-height:1.5!important;
  }
  .cmplz-category-title{
    font-weight:700!important;
  }
  .cmplz-description,
  .cmplz-description p,
  .cmplz-description span{
    color:var(--md-color2)!important;
  }
  .cmplz-always-active{
    color:var(--md-color2)!important;
  }
}
/* -----------------------------------------
   Buttons
   ----------------------------------------- */
.cmplz-cookiebanner .cmplz-buttons{
  border-radius:0!important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn,
.cmplz-cookiebanner .cmplz-buttons button.cmplz-btn,
.cmplz-cookiebanner .cmplz-buttons a.cmplz-btn{
  font-family:var(--space-font)!important;
  font-size:16px!important;
  font-weight:700!important;
  line-height:1.2!important;
  padding:10px 20px!important;
  color:var(--md-color1)!important;
  border:2px solid var(--md-color0)!important;
  border-radius:0!important;
  background-color:var(--md-color2)!important;
  text-decoration:none!important;
  box-shadow:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  background-size:250% 250%!important;
  background-position:right!important;
  background-repeat:no-repeat!important;
  background-image:linear-gradient(
    120deg,
    var(--md-color1) 50%,
    transparent 50%
  )!important;
  transition:background-position .35s ease-out,color .25s ease-out!important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover,
.cmplz-cookiebanner .cmplz-buttons button.cmplz-btn:hover,
.cmplz-cookiebanner .cmplz-buttons a.cmplz-btn:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus,
.cmplz-cookiebanner .cmplz-buttons button.cmplz-btn:focus,
.cmplz-cookiebanner .cmplz-buttons a.cmplz-btn:focus{
  background-position:left!important;
  color:var(--md-color2)!important;
  text-decoration:none!important;
}
/* -----------------------------------------
   Kategorien
   ----------------------------------------- */
.cmplz-cookiebanner .cmplz-categories{
  .cmplz-category{
    background-color:rgba(0,0,0,0.6)!important;
    border:none!important;
  }
  .cmplz-category summary{
    background:transparent!important;
  }
}
/* -----------------------------------------
   Dropdown
   ----------------------------------------- */
#cmplz-cookies-overview,
#cmplz-document,
.editor-styles-wrapper .cmplz-unlinked-mode{
  .cmplz-dropdown{
    background-color:rgba(0,0,0,0.5)!important;
    color:var(--md-color2)!important;
    a,
    p,
    span,
    li,
    label,
    .cmplz-description-functional{
      color:var(--md-color2)!important;
    }

    summary{
      background:transparent!important;
    }
  }
}
/* -----------------------------------------
   SVG Icons
   ----------------------------------------- */
.cmplz-icon{
  svg,
  svg *{
    fill:var(--md-color2)!important;
    stroke:var(--md-color2)!important;
  }
}
/* -----------------------------------------
   Manage Consent Button
   ----------------------------------------- */
button.cmplz-btn.cmplz-manage-consent.manage-consent-1.cmplz-show{
  border-top:1px solid var(--md-color0)!important;
  border-right:1px solid var(--md-color0)!important;
  border-left:1px solid var(--md-color0)!important;
  font-size:0!important;
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  padding:0!important;
  background-color:var(--md-color0)!important;
  background-image:url("/wp-content/uploads/icons/cookie-white.png")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:22px!important;
  box-shadow:none!important;
}
/* -----------------------------------------
   Document Content
   ----------------------------------------- */
#cmplz-document,
.editor-styles-wrapper .cmplz-unlinked-mode{
  max-width:100%!important;
}
/* =========================================
   ___END COOKIE / COMPLIANZ COMPONENT
   ========================================= */

/* =========================================
   MD CONTACT FORM (STANDARD)
   ========================================= */
.md-cta-text,
.md-cta-text a {
  font-family: var(--space-font) !important;
  color: var(--md-color2) !important;
}
.md-cta-text a:hover {
  color: var(--md-color4) !important;
}
.md-contactform .wpcf7-text,
.md-contactform .wpcf7-textarea {
  font-size: clamp(1rem, 0.494vw + 0.907rem, 1.5rem) !important;
  font-family: var(--space-font) !important;
  color: var(--md-color1) !important;
  background-color: var(--md-color2) !important;
  border: none !important;
  padding: 0.2em 1em;
}
.md-contactform .wpcf7-response-output {
  font-family: var(--space-font) !important;
  margin: 0 !important;
  color: var(--md-color2) !important;
  border: transparent !important;
  background-color: var(--md-color0) !important;
}
.md-contactform .wpcf7-not-valid-tip {
  font-family: var(--space-font) !important;
  font-size: small;
  margin: 0 !important;
  color: var(--md-color2) !important;
  background-color: var(--md-color0) !important;
  display: block;
  width: 25%;
  padding: 0 1em;
}
.md-contactform input.wpcf7-submit {
  font-family: var(--space-font) !important;
  color: var(--md-color1) !important;
  font-size: 24px !important;
  background-color: var(--md-color2) !important;
  border: none !important;
  padding: 0.5em !important;
}
.md-contactform input.wpcf7-submit:hover {
  background-color: var(--md-color0) !important;
  color: var(--md-color2) !important;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: transparent !important;
  color: var(--md-color2) !important;
  background-color: var(--md-color0) !important;
  padding: 1em;
}
.md-contactform .datenschutz-hinweis {
  color: var(--md-color2) !important;
}
.md-contactform .datenschutz-hinweis small br {
  display: none;
}
/* =========================================
   ___END MD CONTACT FORM (STANDARD)
   ========================================= */

/* =========================================
   PROJEKTANFRAGE MODAL FORM
   ========================================= */
.projektanfrage-modal {
  p {
    margin: 0;
    width: 100%;
  }
  .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    margin-bottom: 0.75em;
  }
  .form-field {
    display: block;
    width: 100%;
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    width: 100%;
    box-sizing: border-box;
  }
  .form-input {
    padding: 0.75em;
    border: 1px solid var(--md-color1);
    font-family: var(--space-font) !important;
    display: block;
  }
  .form-textarea {
    padding: 0.75em;
    border-color: var(--md-color1);
    font-family: var(--space-font) !important;
    display: block;
  }
  .wpcf7-list-item {
    display: inline-block;
    margin: 0.75em 0 0 -0.25em;
    label {
      display: flex;
      align-items: center;
      gap: 0.5em;
      cursor: pointer;
    }
    input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      border: 2px solid var(--md-color1);
      display: inline-block;
      position: relative;
      cursor: pointer;
      background: transparent;
      &:checked {
        background-color: var(--md-color1);
      }
    }
  }
  .fit-the-fullspace {
    display: none !important;
  }
  br {
    display: none;
  }
}
/* =========================================
   ___END PROJEKTANFRAGE MODAL FORM
   ========================================= */

/* =========================================
   CONTACT FORM SERVICES VARIANT
   ========================================= */
.md_contactform_services span.wpcf7-form-control-wrap {
  display: block !important;
}
.md_contactform_services_other {
  display: none;
}
.md_contactform_services {
  font-family: var(--space-font) !important;
  font-size: clamp(1rem, 0.494vw + 0.907rem, 1.5rem);
  color: var(--md-color1) !important;
}
.md_contactform_services .wpcf7-text,
.md_contactform_services .wpcf7-textarea {
  font-size: clamp(1rem, 0.494vw + 0.907rem, 1.5rem) !important;
  font-family: var(--space-font) !important;
  color: var(--md-color1) !important;
  background-color: var(--md-color2) !important;
  border: 1px solid var(--md-color1) !important;
  padding: 0.2em 1em;
  width: 100%;
  box-sizing: border-box;
}

.md_contactform_services .wpcf7-text:focus,
.md_contactform_services .wpcf7-textarea:focus {
  outline: none;
  border: 1px solid var(--md-color1) !important;
}
.md_contactform_services .wpcf7-radio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75em 2em;
  margin: 1em 0;
}
@media (min-width: 768px) {
  .md_contactform_services .wpcf7-radio {
    grid-template-columns: 1fr 1fr;
  }
}
.md_contactform_services .wpcf7-list-item {
  margin: 0 !important;
}
.md_contactform_services .wpcf7-list-item label,
.md_contactform_services .wpcf7-acceptance label {
  display: flex !important;
  align-items: flex-start;
  gap: 0.75em;
  cursor: pointer;
}
.md_contactform_services .md_contactform_services_other {
  margin-top: 0.5em;
}
.md_contactform_services .datenschutz-hinweis {
  color: var(--md-color1) !important;
}
.md_contactform_services .datenschutz-hinweis small br {
  display: none;
}
.md_contactform_services .datenschutz-acceptance {
  margin-top: 0.75em;
}
.md_contactform_services .wpcf7-submit {
  font-family: var(--space-font) !important;
  color: var(--md-color1) !important;
  font-size: 24px !important;
  background-color: var(--md-color2) !important;
  border: 1px solid var(--md-color1) !important;
  padding: 0.5em 1.2em !important;
  width: auto !important;
  cursor: pointer;
}
.md_contactform_services .wpcf7-submit:hover {
  background-color: var(--md-color1) !important;
  color: var(--md-color2) !important;
}
.md_contactform_services .wpcf7-not-valid-tip {
  font-family: var(--space-font) !important;
  font-size: small;
  margin-top: 0.25em !important;
  color: var(--md-color1) !important;
  background: transparent !important;
  padding: 0 !important;
}
/* =========================================
   ___END CONTACT FORM SERVICES VARIANT
   ========================================= */

/* =========================================
   RESPONSIVE CORRECTIONS
   ========================================= */
/* Tablet 640px */
@media (max-width: 640px) {
    .uk-h2 { font-size: 16px; }
    .uk-h3 { font-size: 18px; }
    .uk-heading-small { font-size: 26px !important; }

    .md-hero-text {
        font-size: 1.5em !important;
	line-height: 1.25 !important}
	
	.md-slogan-correction {
        margin-top: -0.2rem !important;  }
	
	.text-responsives {
		padding: 0 20px;  }
	
	.md-background-bluegrey {
		background: var(--md-color7);
		padding: 0.5em 1em;  }
}
/* Notebook 960px */
@media (max-width: 960px) {
    .text-responsives {
        padding: 0 20px !important;
    }

    .sublayout-responsives {
        width: 86%;
        margin-left: 3%;
    }
}

@media (min-width: 960px) {
    .uk-section {
        padding-top: 0px !important;
    }
}
/* Desktop 1200px */
/* Fullwidht 1600px */
/* =========================================
   END RESPONSIVE CORRECTIONS
   ========================================= */









/* =========================================
   MAIKE BOTT CHAT WIDGET
   ========================================= */
.maike-bott-header {
  background-color: var(--md-color0) !important;
}

.maike-bott-title {
  font-family: var(--space-font);
  font-weight: 700;
}

.maike-bott-body {
  background-color: var(--md-color0);
}

.msg.user {
  border-color: var(--md-color0) !important;
  background-color: var(--md-color0) !important;
  color: var(--md-color2) !important;
  font-family: var(--space-font) !important;
}

.msg.bot {
  border: 1px solid var(--md-color0) !important;
  font-family: var(--space-font) !important;
}

.msg .meta {
  color: var(--md-color7) !important;
  font-family: var(--space-font) !important;
}

.maike-inputbar {
  padding: 0.75em 0 !important;
}

.maike-inputbar button {
  background: var(--md-color4-20) !important;
  font-family: var(--space-font) !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  text-transform: none !important;
}

.maike-inputbar button:hover {
  background: var(--md-color4) !important;
  color: var(--md-color1) !important;
}
/* =========================================
   ___END MAIKE BOTT CHAT WIDGET
   ========================================= */