/* ============================================================================
   GeneratePress Child Theme — plugins.css
   Matomo, Cookies, RankMath TOC, Zammad Chat/Contact, JoliFAQ, Nexter Blocks, MOD FAQ, Pressidium Cookie Consent, S5O-WOMS Rating
   ============================================================================ */


/* ==========================================================================
   Matomo
   ========================================================================== */
#matomo-opt-out {
  padding: 1rem;
  margin: 1rem 0;
}
#matomo-opt-out #trackVisits {
  margin-right: 1rem;
}

/* ==========================================================================
   Cookies
   ========================================================================== */
.s5o-cookie-policy .gridjs-table {
  font-size: 0.7rem;
}

/* ==========================================================================
   MOD: RankMath TOC
   ========================================================================== */
.wp-block-rank-math-toc-block {
  background-color: var(
    --s5o-surface-grey-light
  ); /* COLMIG: was s5o-c-grey-bright-5 (#e3e3e3 → #e8e8e8, ΔE ~2) */
  padding: 2rem 0;
}
.wp-block-rank-math-toc-block div {
  padding: 4px;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  text-transform: uppercase;
}
.wp-block-rank-math-toc-block nav ol {
  list-style-type: decimal-leading-zero;
}
.wp-block-rank-math-toc-block nav ol ol {
  list-style-type: lower-alpha;
}
.wp-block-rank-math-toc-block nav a {
  color: var(
    --s5o-content-secondary
  ); /* COLMIG: was s5o-c-black (#2e3031 → #28373c, ΔE ~3) */
  font-size: 0.875rem;
}
.wp-block-rank-math-toc-block li > ol,
.wp-block-rank-math-toc-block li > ul {
  margin-left: 0;
}

/* ==========================================================================
     PLUGINS
   ========================================================================== */
/* MOD Zammad - Chat
   ========================================================================== */
/* https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/ */
.s5o-chat-tooltip {
  display: block;
  position: fixed;
  right: 2vw;
  bottom: 2vw;
  z-index: 990;
}
.s5o-chat-tooltip:before {
  display: none; /* hide by default */
  position: absolute;

  /* vertically center */
  top: 50%;

  /* move to right */
  right: 100%;
  transform: translateY(-50%);
  margin-right: 15px; /* and add a small left margin */
  box-shadow: rgba(0, 0, 0, 0.24) 0 8px 20px;
  border-radius: 10px;
  background: white; /* COLMIG: typo fixed */
  padding: 1rem;

  /* basic styles */
  width: 250px;
  content: attr(data-text); /* here's the magic */
  color: black;
  text-align: center;
}
.s5o-chat-tooltip:hover:before {
  display: block;
}

.open-zammad-chat {
  cursor: pointer;
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12),
    0 1px 5px 0 rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 50% 50% 10% 50%;
  background-color: var(--s5o-brand-primary);
  padding: 0.5rem;
  width: 4rem;
  height: 4rem;
  color: white;
  font-size: 2.5rem !important;
}
.open-zammad-chat:hover {
  background-color: var(--s5o-brand-secondary);
}

.open-zammad-chat.is-inactive {
  display: none !important;
  background-color: var(
    --s5o-surface-grey-mid
  ); /* COLMIG: was s5o-c-grey-2 (1:1 match) */
}

/* MOD Zammad - Contact form
   ========================================================================== */
.zammad-form .js-thankyou {
  color: var(--s5o-surface-white);
  background: var(
    --s5o-cta-success
  ); /* COLMIG: was s5o-c-green-dark-1 (#04aa6d Türkisgrün → #2ba805 Grasgrün) */
  font-size: larger;
  text-align: left !important;
  padding: 5rem;
}
.zammad-form input[type="text"],
.zammad-form input[type="email"],
.zammad-form input[type="url"],
.zammad-form input[type="password"],
.zammad-form input[type="search"],
.zammad-form input[type="tel"],
.zammad-form input[type="number"],
.zammad-form textarea,
.zammad-form select {
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  transition:
    color 0.1s ease,
    border-color 0.1s ease;
  margin: 0;
  outline: 0;
  box-shadow: 0 0 0 0 transparent inset;
  border: 2px solid rgba(34, 36, 38, 0.15);
  border-top-color: rgba(34, 36, 38, 0.15);
  border-right-color: rgba(34, 36, 38, 0.15);
  border-bottom-color: rgba(34, 36, 38, 0.15);
  border-left-color: rgba(34, 36, 38, 0.15);
  border-radius: 0.28571429rem;
  background: white;
  padding: 1em 1.2em;
  color: rgba(0, 0, 0, 0.87);
  font-size: 1em;
  line-height: 1.21428571em;
}

.zammad-form input[type="file"]::file-selector-button,
.zammad-form button.btn {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  flex: 1 0 auto;
  transition:
    box-shadow 0.1s ease,
    border-color 0.1s ease;
  cursor: pointer;
  margin-right: 1em;
  outline: 0;
  box-shadow: none;

  border: none;
  border-radius: 0.28571429rem;
  background: #e0e1e2;
  padding: 0.67857143em 1em;
  max-width: 50%;
  color: rgba(0, 0, 0, 0.6);
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.21428571em;
  font-family: var(--s5o-f-text);
  text-align: left;
}

.zammad-form button.btn {
  display: inline-block;
  cursor: pointer;
  background-color: var(
    --s5o-cta-action
  ); /* COLMIG: was s5o-c-green-2 (#21ba45 → #61ce70) */
  width: 50%;
  color: var(--s5o-surface-white);
  font-weight: bold;
  font-size: 1.25rem;
  text-align: center;
}

.zammad-form button.btn:hover {
  box-shadow:
    0 0 0 1px transparent inset,
    0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  background-image: none;
  background-color: #cacbcd;
  background-color: var(
    --s5o-cta-success
  ); /* COLMIG: was s5o-c-green-dark-1 (#04aa6d → #2ba805) */
}

/* MOD JoliFAQ
   ========================================================================== */
.jfaq-wrap h4 {
  color: black;
  font-weight: normal;
  font-size: 1.25rem;
  text-transform: unset;
}

.jfaq-wrap div[class*="--jfaq-theme-"] .jfaq--answer {
  background-color: var(--s5o-surface-white);
}

/* NEXTER BLOCKS
   ========================================================================== */
.tp-pro-step-icon-img .tp-icon-img {
  width: 50%;
  height: auto;
}

/* ==========================================================================
     S5O
   ========================================================================== */
/* MOD FAQ
   ========================================================================== */
.s5o-faq-block {
  box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.25);
  background-color: var(--s5o-surface-white);
  padding: 2rem;
}

.s5o-faq-block .betterdocs-faq-wrapper {
  margin-top: 0;
}
.s5o-faq-block .betterdocs-faq-section-title {
  display: none;
}
.s5o-faq-block
  .betterdocs-faq-wrapper
  .betterdocs-faq-inner-wrapper
  .betterdocs-faq-list
  > li
  .betterdocs-faq-group
  .betterdocs-faq-post
  .betterdocs-faq-post-name {
  font-size: 1rem;
  font-weight: bold;
  color: var(--s5o-text-primary);
}
.s5o-faq-block
  .betterdocs-faq-wrapper
  .betterdocs-faq-inner-wrapper
  .betterdocs-faq-list
  > li
  .betterdocs-faq-group
  .betterdocs-faq-main-content {
  font-size: 1rem;
  font-weight: normal;
  color: var(--s5o-text-primary);
}
.s5o-faq-block
  .betterdocs-faq-wrapper
  .betterdocs-faq-inner-wrapper
  .betterdocs-faq-list
  > li
  .betterdocs-faq-group.active
  .betterdocs-faq-post
  .betterdocs-faq-post-name {
  color: var(--s5o-content-copper);
}

/* legacy */

.s5o-faq-block .jfaq--search-group {
  width: 100%;
}

.s5o-faq-block .jfaq--search-wrap {
  padding: 0;
}

.s5o-faq-block .jfaq-wrap {
  margin-top: 0;
}

/* PLUGIN Pressidium Cookie Consent
   ========================================================================== */
/* ATTENTION */
/* MOVED TO -> functions.php  */
/* ATTENTION */

/* PLUGIN S5O-WOMS Rating
   ========================================================================== */
/* Cookie policy table */
.woms-rating--top,
.woms-rating--bottom {
  display: flex; /* statt inline-flex */
  align-items: center; /* horizontales Zentrieren der Kinder in column-Richtung */
}
.s5o-cta-bottom .woms-rating .woms-rating__stars svg {
  width: 60px;
  height: 60px;
  color: var(--s5o-bright-gold);
}
.s5o-cta-bottom .woms-rating .woms-rating__label {
  font-size: 2rem;
}