/*
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.1.1
*/

:root {
	--md-color0: #4000ff;        /* blau */
	--md-color0-50: #d3c4ff;     /* blau hell */
	--md-color0-80: #7b4eff;     /* blau mittel */
	--md-color1: #000;           /* schwarz */
	--md-color2: #fff;           /* weiß */
	--md-color3: #f6f6f6;        /* grau hell */
	--md-color5: #7f7f7f;        /* grau */
	--md-color4: #bfff00;        /* grün */
	--md-color4-20:#ebffb1;      /* grün hell */
	--md-color6: #ffd400;        /* gelb */
	
	--noto-font: 'Noto Serif';
	--space-font: 'Space Mono';
}
::selection {
	background: var(--md-color4) !important;
	color: #000 !important;
}
span.clientsname {
	color: var(--md-color5) !important;
}

/* _____ profile grid corrections */
.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 corrections */

/* _____ cursor corrections */
/* Versteckt den Standard-Cursor */
body.custom-cursor-active {
  cursor: none;
}
/* _____ END cursor corrections  */

/* _____ global font corrections */
.uk-text-lead,
.uk-text-large {
    font-size: clamp(1rem, 0.494vw + 0.907rem, 1.5rem) !important;
}
/* _____ END global font corrections */

/* _____ font-settings */
.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: #fff;
	background: var(--md-color0) !important;
	padding: 0 0.5em 0.1em 0.5em;
	box-decoration-break: clone;
}
.md-text-highlight-green {
    padding: 0.2em 0.6em;
    background: var(--md-color4) !important;
    color: var(--md-color1);
    box-decoration-break: clone;

}
.md-big-text {
	word-spacing: -.3em !important;
	font-weight: 900 !important;
	line-height: 1.67;
}
/* _____ END font-settings */

/* _____ important helper classes ui-kit corrections */
.text-strong {
    font-weight: 700 !important;
}
.text-lowercase,
.text-lowercase p {
	text-transform: lowercase !important;
}
.font-dark {
    color: var(--md-color1) !important;
}
.font-light,
.font-light * {
    color: var(--md-color2) !important;
}
.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-background-light {}
/* _____ END important helper classes ui-kit corrections */

/* _____ global ui-kit corrections */
.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-color5) !important;
}


.uk-section-muted {
	background-color: var(--md-color3) !important;
}
.uk-card-default {
	background-color: var(--md-color0) !important;
}
.uk-card-primary {
	background-color: var(--md-color2) !important;
	color: var(--md-color1)!important;

	.uk-card-title {
		color: var(--md-color1)!important;
	}
}
.uk-card-secondary {
	background-color: var(--md-color3) !important;
	
	.el-content {
		color: var(--md-color1) !important;
	}
}
.uk-heading-small {
    line-height: 1.75 !important;
}
/* _____ END global ui-kit corrections */

/* _____ md-global settings */
.md-hyphens {
    hyphens: auto; 
}
	
/* _____ md-buttons */
.md-button .uk-button {
	font-family: var(--space-font) !important;
}
.md-button .uk-button-text:hover {
	color: var(--md-color0)
}


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


/* _____ END md-sections */

/* _____ md-cards */
.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-cards */


/* _____ md-panelslider */
.md-panelslider > *,
.md-panelslider .el-title,
.md-panelslider .el-meta {
	font-family: var(--space-font)!important;
}
.md-panelslider > *,
.mmd-panelslider .uk-text-meta {
	color:var(--md-color1) !important;
}
.md-panelslider .el-title {
	color: var(--md-color0) !important;
	text-transform: lowercase;
    min-height: 72px !important;
    vertical-align:bottom;
}
.md-panelslider-tag {
    text-transform: lowercase;
	white-space: nowrap;
	padding: 0 .4em;
	border-top-left-radius: 9px;
	border-bottom-right-radius: 9px;
	background-color: #000;
	color: #fff;
    line-height: 1.75 !important;
}
.md-panelslider-tag::before {
	content: '#';
}
.md-panelslider .uk-slidenav-container.uk-position-center-left {
    left: .25em;
    top: 9.5em;
}
.md-panelslider .uk-slidenav {
	border: 2px solid var(--md-color3);
	backdrop-filter: blur(2px);
}
.md-panelslider .uk-slidenav:hover {
	border-color: var(--md-color0);
	color: var(--md-color0) !important;
}
.uk-dotnav > * > * {
    background: transparent !important;
    height: 10px !important;
}
.md-panelslider .uk-dotnav > * > * {
	border-radius: 0 !important;
    border: 1px solid var(--md-color0) !important;
}
.md-panelslider .uk-dotnav > .uk-active > * ,
.md-panelslider .uk-dotnav > * > :hover {
	background-color: var(--md-color0) !important;
}


/* _____ END md-panelslider */

/* _____ md-contactform (CF7) */
@media (max-width: 640px) {
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
	width: 91%;
}
}
span.wpcf7-form-control-wrap {
    display: grid;
}
span.wpcf7-list-item {
    margin: 0;
}
.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: #fff !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;
}
a.datenschutz-link-contact {
    text-decoration: underline;
}
/* _____ END md-contactform (CF7) */

/* ==========================================================
   md_contactform_services
   Kontaktformular – Services Variante
   Konsistent mit bestehendem Hauptformular
   ========================================================== */

/* ----------------------------------------------------------
   Rendering-Fix (überschreibt globales CF7 Grid)
---------------------------------------------------------- */
.md_contactform_services span.wpcf7-form-control-wrap {
  display: block !important;
}
.md_contactform_services_other {
  display: none;
}


/* ----------------------------------------------------------
   Typografie (exakt wie Hauptformular)
---------------------------------------------------------- */
.md_contactform_services {
  font-family: var(--space-font) !important;
  font-size: clamp(1rem, 0.494vw + 0.907rem, 1.5rem);
  color: #000 !important;
}

/* ----------------------------------------------------------
   Eingabefelder
---------------------------------------------------------- */
.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: #000 !important;
  background-color: #fff !important;
  border: 1px solid #000 !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 #000 !important;
}

/* ----------------------------------------------------------
   Radio-Buttons Layout
---------------------------------------------------------- */
.md_contactform_services .wpcf7-radio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75em 2em;
  margin: 1em 0;
}

/* Tablet quer und größer */
@media (min-width: 768px) {
  .md_contactform_services .wpcf7-radio {
    grid-template-columns: 1fr 1fr;
  }
}

/* Radio & Acceptance Label-Ausrichtung */
.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;
}

/* ----------------------------------------------------------
   Conditional Field Abstand
---------------------------------------------------------- */
.md_contactform_services .md_contactform_services_other {
  margin-top: 0.5em;
}

/* ----------------------------------------------------------
   Datenschutz Rendering (wie im Hauptformular)
---------------------------------------------------------- */
.md_contactform_services .datenschutz-hinweis {
  color: #000 !important;
}

.md_contactform_services .datenschutz-hinweis small br {
  display: none;
}

.md_contactform_services .datenschutz-acceptance {
  margin-top: 0.75em;
}

/* ----------------------------------------------------------
   Submit Button (nicht full width)
---------------------------------------------------------- */
.md_contactform_services .wpcf7-submit {
  font-family: var(--space-font) !important;
  color: #000 !important;
  font-size: 24px !important;
  background-color: #fff !important;
  border: 1px solid #000 !important;
  padding: 0.5em 1.2em !important;
  width: auto !important;
  cursor: pointer;
}

.md_contactform_services .wpcf7-submit:hover {
  background-color: #000 !important;
  color: #fff !important;
}

/* ----------------------------------------------------------
   Validation Hinweise (ruhig, schwarz)
---------------------------------------------------------- */
.md_contactform_services .wpcf7-not-valid-tip {
  font-family: var(--space-font) !important;
  font-size: small;
  margin-top: 0.25em !important;
  color: #000 !important;
  background: transparent !important;
  padding: 0 !important;
}


/* _____ the funny header animation */
.md-logo-image img {
	padding: 1em !important;
	
}
.md-image-rotate {
	animation: rotateBackground 20s linear infinite;
}
@keyframes rotateBackground {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
/* _____ END the funny header animation */

/* _____ references corrections */
.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 corrections */


/* _____ complianz corrections*/
.cmplz-cookiebanner.cmplz-show {
	border: 1px solid var(--md-color0)!important;
}	
#cmplz-manage-consent .cmplz-manage-consent,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    font-family: var(--space-font) !important;
}
#cmplz-cookies-overview .cmplz-dropdown, #cmplz-document .cmplz-dropdown, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown {
    background-color: rgba(239, 239, 239, 0.5) !important;
}
#cmplz-manage-consent .cmplz-manage-consent {
    left: 0px !important;
}
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;

}
/* _____ END complianz corrections */


/* _____ case study corrections */
.cs_text_bluefrog {
    color: var(--md-color0) !important;
}
.cs_panel-dotnav .uk-dotnav>*>* {
    width: 0.75em !important;
    height: 0.75em !important;
    border-color: #fff;
}
.cs_panel-dotnav .uk-dotnav>.uk-active>* {
    border-color: var(--md-color4) !important;
    background: var(--md-color4) !important;
}
/* _____ END case study corrections */

/* _____ services corrections */

/* =========================================
   Custom Service Bullets – UIkit Override
   ========================================= */

.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;
}

/* Entfernt UIkit Marker vollständig */
.uk-panel ul.md-services-bullets li::marker,
ul.md-services-bullets li::marker {
  content: none !important;
}

/* Custom Bullet */
.uk-panel ul.md-services-bullets li::before,
ul.md-services-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 16px;
  height: 16px;
  background-image: url("/wp-content/uploads/2026/02/cs_after_white.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Letztes Element */
ul.md-services-bullets li:last-child {
  margin-bottom: 0;
}
.md-services-grid .uk-card.uk-card-default {
    border: 1px solid var(--md-color2);
}
/* _____ END services corrections */


/* _____ maike bott corrections */
/* =============================================================================
   maike-bott-chat.css — Blank Scaffold
   Zweck: Sauberes Grundgerüst mit Kommentaren, damit du dein eigenes Styling
          gemäß Styleguide definieren kannst.
   -----------------------------------------------------------------------------
   Hinweise:
   - Alles ist namespaced mit .maike-bott-chat
   - Kommentierte Properties sind nur Vorschläge / Platzhalter
   - Entferne, ergänze oder überschreibe nach Bedarf
============================================================================= */

/* 00) Token-Mapping (optional)
   Wenn du eigene Variablen nutzen willst, mappe sie hier auf eure :root-Variablen.
   -------------------------------------------------------------------------- */
/*
:root {
  --mb-color-primary: var(--md-color0);   /* z.B. Header, Akzent */
  --mb-color-text:    var(--md-color1);   /* Standardtext */
  --mb-color-white:   var(--md-color2);
  --mb-color-bg:      var(--md-color0) !important;   /* Seiten-/Flächenhintergrund */
  --mb-color-cta:     var(--md-color4);   /* Button-Farbe */
  --mb-color-muted:   var(--md-color5);   /* Meta-/Dezentschrift */

  --mb-font-base:     var(--noto-font);   /* Fließtext */
  --mb-font-mono:     var(--space-font);  /* Input/Tech */
}

/* 02) Header (Wrapper, Titel, Untertitel)
   -------------------------------------------------------------------------- */
.maike-bott-header {
	background-color: var(--md-color0) !important;
}

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

/* 04) Body / Feed-Wrapper
   -------------------------------------------------------------------------- */
.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;
}

/* 06) Inputbar (Form, Input, Button)
   -------------------------------------------------------------------------- */
.maike-inputbar {
	padding: 0.75em 0 !important;
}

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

/* 07) States (Hover, Focus, Disabled)
   -------------------------------------------------------------------------- */
.maike-inputbar button:hover {
	background: var(--md-color4) !important;
    color: var(--md-color1) !important;
}

/* 10) Optional: Dark-Header / Theme-Varianten (nur als Beispiel)
   -------------------------------------------------------------------------- */
/*
.maike-bott-chat.theme-dark-header .maike-bott-header {
  background: #111;
}
.maike-bott-chat.theme-dark-header .maike-bott-title,
.maike-bott-chat.theme-dark-header .maike-bott-subtitle {
  color: #fff;
}
*/
/* _____ END maike bott corrections */