/* ContrastPilot Frontend Styles
   Version 0.2.5
   Diese Regeln sind bewusst robust, damit Kontrastmodi auch bei Page Builder Layouts wirken.
*/

:root {
  --contrastpilot-blue: #0000b8;
  --contrastpilot-yellow: #ffd400;
  --contrastpilot-black: #000000;
  --contrastpilot-white: #ffffff;
  --contrastpilot-active: #e00000;

  --contrastpilot-button-size: 20px;
  --contrastpilot-button-gap: 6px;
  --contrastpilot-toolbar-offset-top: 8px;
  --contrastpilot-toolbar-offset-side: 8px;

  --contrastpilot-page-bg: initial;
  --contrastpilot-page-text: initial;
  --contrastpilot-link: initial;
  --contrastpilot-border: initial;
}

html.contrastpilot-theme-yellow-black {
  --contrastpilot-page-bg: var(--contrastpilot-black);
  --contrastpilot-page-text: var(--contrastpilot-yellow);
  --contrastpilot-link: var(--contrastpilot-white);
  --contrastpilot-border: var(--contrastpilot-yellow);
}

html.contrastpilot-theme-black-yellow {
  --contrastpilot-page-bg: var(--contrastpilot-yellow);
  --contrastpilot-page-text: var(--contrastpilot-black);
  --contrastpilot-link: var(--contrastpilot-blue);
  --contrastpilot-border: var(--contrastpilot-black);
}

html.contrastpilot-theme-blue-white {
  --contrastpilot-page-bg: var(--contrastpilot-white);
  --contrastpilot-page-text: var(--contrastpilot-blue);
  --contrastpilot-link: var(--contrastpilot-black);
  --contrastpilot-border: var(--contrastpilot-blue);
}

html.contrastpilot-theme-white-blue {
  --contrastpilot-page-bg: var(--contrastpilot-blue);
  --contrastpilot-page-text: var(--contrastpilot-white);
  --contrastpilot-link: var(--contrastpilot-yellow);
  --contrastpilot-border: var(--contrastpilot-white);
}

html.contrastpilot-theme-yellow-black body,
html.contrastpilot-theme-black-yellow body,
html.contrastpilot-theme-blue-white body,
html.contrastpilot-theme-white-blue body {
  background: var(--contrastpilot-page-bg) !important;
  color: var(--contrastpilot-page-text) !important;
}

html.contrastpilot-theme-yellow-black main,
html.contrastpilot-theme-yellow-black section,
html.contrastpilot-theme-yellow-black article,
html.contrastpilot-theme-yellow-black aside,
html.contrastpilot-theme-yellow-black header,
html.contrastpilot-theme-yellow-black footer,
html.contrastpilot-theme-yellow-black nav,
html.contrastpilot-theme-yellow-black div:not(.contrastpilot-wrap):not(.contrastpilot-toolbar),
html.contrastpilot-theme-black-yellow main,
html.contrastpilot-theme-black-yellow section,
html.contrastpilot-theme-black-yellow article,
html.contrastpilot-theme-black-yellow aside,
html.contrastpilot-theme-black-yellow header,
html.contrastpilot-theme-black-yellow footer,
html.contrastpilot-theme-black-yellow nav,
html.contrastpilot-theme-black-yellow div:not(.contrastpilot-wrap):not(.contrastpilot-toolbar),
html.contrastpilot-theme-blue-white main,
html.contrastpilot-theme-blue-white section,
html.contrastpilot-theme-blue-white article,
html.contrastpilot-theme-blue-white aside,
html.contrastpilot-theme-blue-white header,
html.contrastpilot-theme-blue-white footer,
html.contrastpilot-theme-blue-white nav,
html.contrastpilot-theme-blue-white div:not(.contrastpilot-wrap):not(.contrastpilot-toolbar),
html.contrastpilot-theme-white-blue main,
html.contrastpilot-theme-white-blue section,
html.contrastpilot-theme-white-blue article,
html.contrastpilot-theme-white-blue aside,
html.contrastpilot-theme-white-blue header,
html.contrastpilot-theme-white-blue footer,
html.contrastpilot-theme-white-blue nav,
html.contrastpilot-theme-white-blue div:not(.contrastpilot-wrap):not(.contrastpilot-toolbar) {
  background-color: var(--contrastpilot-page-bg) !important;
  color: var(--contrastpilot-page-text) !important;
  border-color: var(--contrastpilot-border) !important;
}

html.contrastpilot-theme-yellow-black p,
html.contrastpilot-theme-yellow-black li,
html.contrastpilot-theme-yellow-black span:not(.contrastpilot-separator),
html.contrastpilot-theme-yellow-black h1,
html.contrastpilot-theme-yellow-black h2,
html.contrastpilot-theme-yellow-black h3,
html.contrastpilot-theme-yellow-black h4,
html.contrastpilot-theme-yellow-black h5,
html.contrastpilot-theme-yellow-black h6,
html.contrastpilot-theme-black-yellow p,
html.contrastpilot-theme-black-yellow li,
html.contrastpilot-theme-black-yellow span:not(.contrastpilot-separator),
html.contrastpilot-theme-black-yellow h1,
html.contrastpilot-theme-black-yellow h2,
html.contrastpilot-theme-black-yellow h3,
html.contrastpilot-theme-black-yellow h4,
html.contrastpilot-theme-black-yellow h5,
html.contrastpilot-theme-black-yellow h6,
html.contrastpilot-theme-blue-white p,
html.contrastpilot-theme-blue-white li,
html.contrastpilot-theme-blue-white span:not(.contrastpilot-separator),
html.contrastpilot-theme-blue-white h1,
html.contrastpilot-theme-blue-white h2,
html.contrastpilot-theme-blue-white h3,
html.contrastpilot-theme-blue-white h4,
html.contrastpilot-theme-blue-white h5,
html.contrastpilot-theme-blue-white h6,
html.contrastpilot-theme-white-blue p,
html.contrastpilot-theme-white-blue li,
html.contrastpilot-theme-white-blue span:not(.contrastpilot-separator),
html.contrastpilot-theme-white-blue h1,
html.contrastpilot-theme-white-blue h2,
html.contrastpilot-theme-white-blue h3,
html.contrastpilot-theme-white-blue h4,
html.contrastpilot-theme-white-blue h5,
html.contrastpilot-theme-white-blue h6 {
  color: var(--contrastpilot-page-text) !important;
}

html.contrastpilot-theme-yellow-black a,
html.contrastpilot-theme-black-yellow a,
html.contrastpilot-theme-blue-white a,
html.contrastpilot-theme-white-blue a {
  color: var(--contrastpilot-link) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

html.contrastpilot-theme-yellow-black input,
html.contrastpilot-theme-yellow-black textarea,
html.contrastpilot-theme-yellow-black select,
html.contrastpilot-theme-black-yellow input,
html.contrastpilot-theme-black-yellow textarea,
html.contrastpilot-theme-black-yellow select,
html.contrastpilot-theme-blue-white input,
html.contrastpilot-theme-blue-white textarea,
html.contrastpilot-theme-blue-white select,
html.contrastpilot-theme-white-blue input,
html.contrastpilot-theme-white-blue textarea,
html.contrastpilot-theme-white-blue select {
  background: var(--contrastpilot-page-bg) !important;
  color: var(--contrastpilot-page-text) !important;
  border-color: var(--contrastpilot-border) !important;
}

html.contrastpilot-theme-yellow-black img,
html.contrastpilot-theme-black-yellow img,
html.contrastpilot-theme-blue-white img,
html.contrastpilot-theme-white-blue img,
html.contrastpilot-theme-yellow-black video,
html.contrastpilot-theme-black-yellow video,
html.contrastpilot-theme-blue-white video,
html.contrastpilot-theme-white-blue video,
html.contrastpilot-theme-yellow-black svg,
html.contrastpilot-theme-black-yellow svg,
html.contrastpilot-theme-blue-white svg,
html.contrastpilot-theme-white-blue svg {
  filter: none !important;
}

/* Toolbar: eigene Bedienleiste, unabhängig vom Theme und von Page Buildern */
.contrastpilot-wrap {
  position: fixed;
  top: var(--contrastpilot-toolbar-offset-top);
  right: var(--contrastpilot-toolbar-offset-side);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 8px;
  background: rgba(243, 243, 243, 0.96) !important;
  border: 1px solid #d6d6d6 !important;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  color: #111111 !important;
  font-size: 16px !important;
}

.contrastpilot-wrap.contrastpilot-position-top-left {
  top: var(--contrastpilot-toolbar-offset-top);
  left: var(--contrastpilot-toolbar-offset-side);
  right: auto;
  bottom: auto;
  transform: none;
}

.contrastpilot-wrap.contrastpilot-position-top-center {
  top: var(--contrastpilot-toolbar-offset-top);
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
}

.contrastpilot-wrap.contrastpilot-position-top-right {
  top: var(--contrastpilot-toolbar-offset-top);
  right: var(--contrastpilot-toolbar-offset-side);
  left: auto;
  bottom: auto;
  transform: none;
}

body.admin-bar .contrastpilot-wrap,
body.admin-bar .contrastpilot-wrap.contrastpilot-position-top-left,
body.admin-bar .contrastpilot-wrap.contrastpilot-position-top-center,
body.admin-bar .contrastpilot-wrap.contrastpilot-position-top-right {
  top: 40px;
}

body.fl-builder-edit .contrastpilot-wrap,
body.fl-builder-editing .contrastpilot-wrap,
.fl-builder-bar ~ .contrastpilot-wrap {
  display: none !important;
}

.contrastpilot-toolbar {
  display: flex;
  align-items: center;
  gap: var(--contrastpilot-button-gap);
  flex-wrap: nowrap;
  background: transparent !important;
  color: #111111 !important;
}

.contrastpilot-toolbar button {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: var(--contrastpilot-button-size) !important;
  height: var(--contrastpilot-button-size) !important;
  min-width: var(--contrastpilot-button-size) !important;
  min-height: var(--contrastpilot-button-size) !important;
  max-width: var(--contrastpilot-button-size) !important;
  max-height: var(--contrastpilot-button-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  background-image: none !important;
  text-shadow: none !important;
  text-indent: 0 !important;
  opacity: 1 !important;
}

.contrastpilot-toolbar button:focus-visible {
  outline: 2px solid #4d90fe !important;
  outline-offset: 2px !important;
}

.contrastpilot-font-btn {
  background: var(--contrastpilot-black) !important;
  color: var(--contrastpilot-white) !important;
  border: 1.5px solid var(--contrastpilot-black) !important;
  box-shadow: inset 0 0 0 1px #4d4d4d !important;
}

.contrastpilot-font-reset::after {
  content: "";
  width: 9px;
  height: 9px;
  border: 1.3px solid var(--contrastpilot-white);
  border-radius: 50%;
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

.contrastpilot-font-reset span {
  position: relative;
  z-index: 2;
  transform: scale(0.78);
  color: var(--contrastpilot-white) !important;
}

.contrastpilot-view-btn {
  background: var(--view-bg) !important;
  color: var(--view-text) !important;
  border: 1.5px solid #999999 !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.contrastpilot-view-btn::before {
  content: "T";
  color: var(--view-text);
  line-height: 1;
}

.view-standard {
  --view-text: #111111;
  --view-bg: #ffffff;
}

.view-yellow-black {
  --view-text: var(--contrastpilot-yellow);
  --view-bg: var(--contrastpilot-black);
}

.view-black-yellow {
  --view-text: var(--contrastpilot-black);
  --view-bg: var(--contrastpilot-yellow);
}

.view-blue-white {
  --view-text: var(--contrastpilot-blue);
  --view-bg: var(--contrastpilot-white);
}

.view-white-blue {
  --view-text: var(--contrastpilot-white);
  --view-bg: var(--contrastpilot-blue);
}

.contrastpilot-active {
  outline: 2px solid var(--contrastpilot-active) !important;
  outline-offset: 2px !important;
}

.contrastpilot-separator {
  width: 1px;
  height: 20px;
  background: #c7c7c7;
  margin: 0 2px;
  display: inline-block;
}

@media (max-width: 782px) {
  body.admin-bar .contrastpilot-wrap,
  body.admin-bar .contrastpilot-wrap.contrastpilot-position-top-left,
  body.admin-bar .contrastpilot-wrap.contrastpilot-position-top-center,
  body.admin-bar .contrastpilot-wrap.contrastpilot-position-top-right {
    top: 54px;
  }
}

@media (max-width: 520px) {
  .contrastpilot-wrap,
  .contrastpilot-wrap.contrastpilot-position-top-left,
  .contrastpilot-wrap.contrastpilot-position-top-center,
  .contrastpilot-wrap.contrastpilot-position-top-right {
    top: auto;
    left: auto;
    right: 8px;
    bottom: 8px;
    transform: none;
  }

  body.admin-bar .contrastpilot-wrap,
  body.admin-bar .contrastpilot-wrap.contrastpilot-position-top-left,
  body.admin-bar .contrastpilot-wrap.contrastpilot-position-top-center,
  body.admin-bar .contrastpilot-wrap.contrastpilot-position-top-right {
    top: auto;
    bottom: 8px;
  }
}


.contrastpilot-wrap * {
  box-sizing: border-box !important;
}