/* ##### Resets ##### */
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  max-width: 1920px;
  margin: 0 auto;
  background-color: white;
  /* background-color: rosybrown; */
}
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;

  /* Fallback */
  min-height: 100dvh;
  /* Preferred */
  display: flex;
  flex-direction: column;
}
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: inherit;
}
main {
  flex: 1;
}
/*  Buttons  */
.custom-button a {
  text-decoration: none;
  color: inherit;
}
.custom-button p {
  font-family: var(--wp--preset--font-family--nunito);
  font-size: var(--wp--preset--font-size--body-normal);
}

.wp-block-button :hover {
  opacity: 0.7;
}


/* Grid container für call to action */

.felusch-call-to-action {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--sm-16-r, 1rem);
  max-width: 100%; /* Container passt sich an */
  justify-content: stretch;
}
@media screen and (max-width: 640px) {
  .felusch-call-to-action {
    grid-template-columns: 1fr;
  }

  .felusch-inhouse-card .felusch-call-to-action {
    width: 100%;
  }
}
/* ##### Resets ##### */

/* ##### Container for wider separators ##### */
.flex-block .wp-block-image,
.flex-block .wp-block-image img {
  width: 100%;
}
/* ##### Container for wider separators ##### */

/* ##### Container for wider separators ##### */
.wide-divider {
  max-width: 1068px !important;
  margin-inline: auto !important;
}
/* ##### Container for wider separators ##### */

/* ##### Umbrechen von Text in gleichlange Zeilen ##### */
.textBalance {
  text-wrap: balance;
}
/* ##### Umbrechen von Text in gleichlange Zeilen ##### */

/* ##### global padding settings ##### */
/* global outer padding except in full layout */
.wp-site-blocks > .woocommerce > .is-layout-constrained,
.wp-site-blocks > .is-layout-constrained,
.wp-site-blocks > .wp-block-group > .wp-block-post-content {
  padding-inline: var(--wp--custom--global-outer-padding-inline);
}

.no-global-margin {
  margin-inline: calc(-1 * var(--wp--custom--global-outer-padding-inline)) !important;
  padding-inline: var(--wp--custom--global-outer-padding-inline) !important;
}
.no-global-padding {
  margin-inline: calc(-1 * var(--wp--custom--global-outer-padding-inline)) !important;
}
/* ##### global padding settings ##### */

/** ##### Footer Cookie ##### */
.cookie-menu:hover {
  color: var(--wp--preset--color--primary);
  cursor: pointer;
}
/** ##### Footer Cookie ##### */

/** ##### Cookie Banner #####*/
.cmplz-links a {
  text-decoration: none !important;
}

.cmplz-link {
  text-transform: uppercase;
}

.cookie-statement {
  display: none;
}

.cmplz-manage-third-parties {
  display: inline !important;
}

.cmplz-document-eu {
  display: inline !important;
}
/** ##### Cookie Banner #####*/

/** ##### Klasse um was auszublenden #####*/
.hide {
  display: none;
}
/** ##### Klasse um was auszublenden #####*/

/** ##### Referenzen Liste ##### */
/** Kein Wrap und overflow */
.referencesList {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: var(--wp--preset--spacing--sm-16-r);
}

/** Für Editor */
.referencesList .block-editor-rich-text__editable.rich-text {
  white-space: nowrap !important;
}

/** Abgerundeter Kasten für Einträge */
.referencesList li {
  background-color: var(--wp--preset--color--background);
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: 8px;
  padding-block: var(--wp--preset--spacing--xxs-6);
  padding-inline: var(--wp--preset--spacing--xs-12-r);
  user-select: none;
}
/** ##### Referenzen Liste ##### */

@media (max-width: 640px) {
  .display-none-mobile {
    display: none;
  }
}

/** ##### Hover effects for Teilnehmer Link Karten ##### */
/* Animate felusch-teilnehmer-link hover effects */
.felusch-teilnehmer-link {
  transition: background 0.3s, color 0.3s;
}
.felusch-teilnehmer-link-icon .icon-container path {
  transition: fill 0.3s;
}
.felusch-teilnehmer-link button {
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
.felusch-teilnehmer-link .icon-container {
  transition: color 0.3s;
}
.felusch-teilnehmer-link button:hover {
  transition: opacity 0.3s;
}

/* gradient background of card */
.felusch-teilnehmer-link:hover {
  background: linear-gradient(180deg, #0f6dbf 0%, #0f7a95 100%);
  color: var(--wp--preset--color--primary-foreground, white);
}

/* white icons, fonts, border etc */
.felusch-teilnehmer-link:hover .felusch-teilnehmer-link-icon .icon-container path {
  /* fill: var(--wp--preset--color--primary-foreground, white) !important; */
  stroke: var(--wp--preset--color--primary-foreground, white) !important;
}
.felusch-teilnehmer-link:hover button,
.felusch-teilnehmer-link:hover a {
  color: var(--wp--preset--color--primary-foreground, white) !important;
  background-color: transparent !important;
  border-color: var(--wp--preset--color--primary-foreground, white) !important;
}

.felusch-teilnehmer-link:hover .icon-container {
  color: var(--wp--preset--color--primary-foreground, white) !important;
}

.felusch-teilnehmer-link:hover button:hover,
.felusch-teilnehmer-link:hover a:hover,
.felusch-teilnehmer-link:hover .wp-block-ermisch-block-custom-button {
  opacity: 1;
}
/** ##### Hover effects for Teilnehmer Link Karten ##### */

/** ##### Header Style wird durch Custom Header kontrolliert ##### */
/* Header "durchsichtig" */
header.wp-block-template-part {
  display: contents;
}

/* Darunter liegende Gruppe ebenfalls "durchsichtig" (nicht benutzt, weil wir die Gruppe selber auf Sticky setzen. Dadurch hat man die ganze Leiste mit Hintergrundfarbe beim Scrollen */
/* header.wp-block-template-part:first-child .wp-block-group {
  display: contents;
} */
/** ##### Header Style wird durch Custom Header kontrolliert ##### */

/** #### Styling Feature List ##### */

/* General List Styling */
.felusch-seminar-list,
.wp-block-list.felusch-seminar-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--sm-16);
}

.felusch-seminar-list li,
.felusch-seminar-list .wp-block-list-item li {
  margin-bottom: 0;
  padding-left: 2rem;
  position: relative;
  display: flex;
  align-items: center;
}

/* Add checkmark icon using ::before pseudo-element */
.felusch-seminar-list li::before,
.felusch-seminar-list .wp-block-list-item li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.625rem;
  height: 1.625rem;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="128" cy="128" r="96" fill="none" stroke="%23084d86" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><line x1="88" y1="128" x2="168" y2="128" fill="none" stroke="%23084d86" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><polyline points="136 96 168 128 136 160" fill="none" stroke="%23084d86" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

ul.felusch-seminar-list,
.block-editor-block-list__block ul.felusch-seminar-list {
  padding-left: 0;
  margin-left: 0;
}

/* Mobile Styles */
@media (max-width: 640px) {
  .felusch-seminar-list {
    flex-direction: column;
    gap: var(--wp--preset--spacing--xxs-6);
  }
}

/** ##### Styling für Seminare ##### */

/* Learnings list in Accordion */
.wp-block-list.felusch-learnings-list {
  list-style: none;
  padding-left: 1rem;
}
.wp-block-list.felusch-learnings-list li,
.wp-block-list.felusch-learnings-list .wp-block-list-item li {
  margin-bottom: 0.375rem;
  padding-left: 1.5rem;
  position: relative;
}
.wp-block-list.felusch-learnings-list li::before,
.wp-block-list.felusch-learnings-list .wp-block-list-item li::before {
  content: '✓ ';
  color: var(--wp--preset--color--secondary, #084d86);
  position: absolute;

  left: 0;
  top: 0;
  font-weight: 300;
}

/* Tabs Active and hover state */

.wp-block-ermisch-block-tabs-block .tab-header-buttons button:hover {
  color: var(--wp--preset--color--primary, #0f6dbf);
}
.wp-block-ermisch-block-tabs-block .tab-header-buttons button.active:hover {
  color: var(--wp--preset--color--foreground, #333333);
}

.wp-block-ermisch-block-tabs-block .tab-header-buttons button.active .tab-title {
  font-weight: 600;
}

/* Smooth transition for sticky state changes */
.wp-block-ermisch-block-tabs-block .tab-heading,
.wp-block-ermisch-block-tabs-block .tab-sidebar.is-stuck .tab-header .tab-header-buttons .tab-title,
.wp-block-ermisch-block-tabs-block
  .tab-sidebar.is-stuck
  .tab-header
  .tab-header-buttons
  .tab-label {
  transition: font-size 0.2s ease-in-out;
}

/* .wp-block-ermisch-block-tabs-block .tab-sidebar {
  transition: gap 0.1s ease-in-out;
  transition: padding 0.1s ease-in-out;
} */

.wp-block-ermisch-block-tabs-block .tab-sidebar.is-stuck {
  padding-top: 1.5rem;
}

/* reduce font size and adjust spacing for smaller screens */
@media (max-width: 640px) {
  .wp-block-ermisch-block-tabs-block .tab-sidebar.is-stuck .tab-heading {
    font-size: 1rem;
  }
  .wp-block-ermisch-block-tabs-block
    .tab-sidebar.is-stuck
    .tab-header
    .tab-header-buttons
    .tab-title,
  .wp-block-ermisch-block-tabs-block
    .tab-sidebar.is-stuck
    .tab-header
    .tab-header-buttons
    .tab-label {
    font-size: 0.8rem !important;
  }

  .wp-block-ermisch-block-tabs-block .tab-sidebar.is-stuck {
    gap: 1rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    opacity: 0.98;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
}

/* Kursinhalte */
.felusch-kurs-inhalte .tab-label {
  white-space: nowrap;
}

/* Modul Liste */

.felusch-modul-list {
  list-style: none;
}
.felusch-modul-list li,
.felusch-modul-list .wp-block-list-item li {
  margin-bottom: 1.5rem;
  padding-left: 0;
  margin-left: 0;
}
ul.felusch-modul-list,
.block-editor-block-list__block ul.felusch-modul-list {
  padding-left: 0!important;
  margin-left: 0;
}

/** ##### Styling für Download Links ##### */

/* Inject Svg Icon */

.felusch-external-link a {
  display: inline-flex;
  align-items: top;
  justify-content: top;
  gap: 0.2em;

  text-decoration: none;
}

.felusch-external-link a::after {
  content: '';
  display: inline-block;
  width: 1.375em;
  height: 1.375em;

  background-color: currentColor; /* takes the link's text color */

  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M220,104a4,4,0,0,1-8,0V49.66l-73.16,73.17a4,4,0,0,1-5.66-5.66L206.34,44H152a4,4,0,0,1,0-8h64a4,4,0,0,1,4,4Zm-36,28a4,4,0,0,0-4,4v72a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V80a4,4,0,0,1,4-4h72a4,4,0,0,0,0-8H48A12,12,0,0,0,36,80V208a12,12,0,0,0,12,12H176a12,12,0,0,0,12-12V136A4,4,0,0,0,184,132Z"/></svg>')
    no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M220,104a4,4,0,0,1-8,0V49.66l-73.16,73.17a4,4,0,0,1-5.66-5.66L206.34,44H152a4,4,0,0,1,0-8h64a4,4,0,0,1,4,4Zm-36,28a4,4,0,0,0-4,4v72a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V80a4,4,0,0,1,4-4h72a4,4,0,0,0,0-8H48A12,12,0,0,0,36,80V208a12,12,0,0,0,12,12H176a12,12,0,0,0,12-12V136A4,4,0,0,0,184,132Z"/></svg>')
    no-repeat center / contain;
}

.felusch-external-link:hover {
  color: var(--wp--preset--color--primary);
}

/* Layout */

.felusch-link-collection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--sm-16-r, 1.5rem);
}
@media (max-width: 1024px) {
  .felusch-link-collection {
    grid-template-columns: 1fr;
  }
}

.wp-block-post-excerpt__more-link {
  position: relative;
  display: inline-block;
  border: 1px var(--wp--preset--color--foreground, #333333) solid;
  border-radius: 10px;
  padding-block: 0.5rem;
  margin-top: 32px;
  padding-left: 2.8rem;
  padding-right: 1.7rem;
  text-decoration: none;
  color: var(--wp--preset--color--foreground, #333333);
}

.wp-block-post-excerpt__more-link::before {
  content: '';
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: 1.625rem;
  height: 1.625rem;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

@media (max-width: 640px) {
  .wp-block-post-excerpt__more-text {
    text-align: right;
  }
  .wp-block-post-featured-image {
    min-height: 0px;
    min-width: 100%;
  }
  .attachment-full.size-full.wp-post-image {
    height: 100%;
  }
}

@media (min-width: 641px) {
  /* Add arrows to Tab Buttons */
  .wp-block-ermisch-block-tabs-block .tab-header-buttons button:not(.active) .tab-title::before {
    content: '';
    display: inline-flex;
    width: 1.375rem;
    height: 1.375rem;
    margin-right: 0.2rem;

    vertical-align: sub;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* Change arrow color to blue on hover */
  .wp-block-ermisch-block-tabs-block
    .tab-header-buttons
    button:not(.active):hover
    .tab-title::before {
    filter: brightness(0) saturate(100%) invert(20%) sepia(96%) saturate(1352%) hue-rotate(211deg)
      brightness(118%) contrast(101%);
  }
}

/* micro animation for cards -depricated*/
/* 
.felusch-modul-card-container:hover,
.ermisch-seminar-card:hover,
.felusch-inhouse-card:hover {
  filter: brightness(1.03);
  transform: translateY(-4px);
  transition: transform 0.3s ease, filter 0.3s ease;
} */

/* micro animation for cards, no effect on Formular */
.felusch-modul-card-container:hover:not(:has(.kontaktformular-dialog-popup:is(:hover, .open))),
.ermisch-seminar-card:hover:not(:has(.kontaktformular-dialog-popup:is(:hover, .open))),
.felusch-inhouse-card:hover:not(:has(.kontaktformular-dialog-popup:is(:hover, .open))) {
  filter: brightness(1.03);
  transform: translateY(-4px);
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Spacing in Datenschutz */
.felusch-datenschutz h3,
.felusch-datenschutz h4 {
  margin-top: var(---wp--preset--spacing--sm-24-r, 1.5rem);
}
.felusch-datenschutz ul {
  padding-left: 1.5rem;
}

/* Listen in Block-Beiträgen */
.wp-singular .wp-block-list {
  padding-left: 1.75rem;
}

/*Schrift BilderGalerie */
.vp-portfolio__item-meta {
  font-size: var(--wp--preset--font-size--body-small, clamp(0.688rem, 0.598rem + 0.446vw, 1rem));
}
/*Schrift BilderGalerie Popup */
.vp-portfolio__item-popup-title {
  font-size: var(--wp--preset--font-size--body-small, clamp(0.688rem, 0.598rem + 0.446vw, 1rem));
}
/*Dateinamen ausblenden BilderGalerie */
.vp-portfolio__item-popup-description {
  display: none;
}
.block-preview-picture img {
  max-height: 200px;
}
@media (max-width: 640px) {
  .block-preview-picture-image img {
    object-fit: contain !important;
  }
}