/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/*
Theme Name:   Bricks Child Theme
Theme URI:    https://bricksbuilder.io/
Description:  Use this child theme to extend Bricks.
Author:       Bricks
Author URI:   https://bricksbuilder.io/
Template:     bricks
Version:      1.1
Text Domain:  bricks
*/

/* ------------------------------------ */
/* GLOBAL BASIS */
/* ------------------------------------ */



body {
  background-color: hsl(0, 0%, 98%);
}

html:has(body.page) {
  scroll-behavior: smooth;
}

h2 {
  scroll-margin-top: 9rem;
}

section {
  scroll-margin-top: 6rem;
}

.pre.line-numbers {
	margin-left: 1.5rem;
}

.btn {
	transition: background-color 0.25s ease-in-out;
}

.btn:hover {
	background-color: #07658f;
}

.btn--light:hover {
	background-color: #e7e7e7;
    color: var(--text-title);
}

.wsf-form .wsf-section>legend {
	position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(0 100% 100% 0);
    white-space: nowrap;
    border-width: 0;
}

.faq-wrapper .x-accordion_header {
	transition: all .0s ease;
}

:where(.x-tabs_tab) {
	transition: all .0s ease !important;
}

.wsf-form button.wsf-button.wsf-button-primary:focus {
    outline-offset: 0.3125rem;
    outline: 2px solid #000000;
}

 @media (prefers-reduced-motion: reduce) {
    .btn {
      transition: none;
    }
  }

@layer bricks {
  .skip-link {
    z-index: 999999;
  }

  body.bricks-is-frontend :focus-visible {
    outline: var(--focus-border);
    outline-offset: var(--focus-offset);
  }

  .highlight {
    color: var(--brand);
  }

  strong {
    color: var(--text-title);
  }

  .ncore_footer_placeholder,
  .ncore_affiliate_footer {
    display: none;
  }

  /* ------------------------------------ */
  /* KARTEN - Hintergrund und Rahmen */
  /* ------------------------------------ */

  [class~="bento-card"],
  [class~="blog-card"],
  [class~="show-card"],
  [class~="law-card"],
  [class~="pricing-card"] {
    background-color: #ffffff;
    border: 0.063rem solid var(--border-primary);
    border-radius: var(--radius-primary);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05);
  }

  /* ------------------------------------ */
  /* CLICKABLE PARENT Links Overlay */
  /* ------------------------------------ */

  .bricks-is-frontend .clickable-parent a::after {
    content: "";
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 1;
  }

  /* ------------------------------------ */
  /* EXTERNAL LINKS - kleines Icon */
  /* ------------------------------------ */

  a[target="_blank"]:not(.ressource-link):not(.clickable-parent a)::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.25rem;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%2F%3E%3Cpolyline points='15 3 21 3 21 9'%2F%3E%3Cline x1='10' y1='14' x2='21' y2='3'%2F%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%2F%3E%3Cpolyline points='15 3 21 3 21 9'%2F%3E%3Cline x1='10' y1='14' x2='21' y2='3'%2F%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
  }

  /* ------------------------------------ */
  /* FORM ELEMENTE (Checkbox, Radio) */
  /* ------------------------------------ */

  /* Basis für Radio- und Checkbox-Inputs */
  input[type="radio"],
  input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    width: 1.25rem;
    height: 1.25rem;
    border: 0.125rem solid #6b7280;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
    margin-top: 0.3em;
	transition-duration: 0s;
  }

  /* Fokus für Inputs */
  input[type="radio"]:focus-visible,
  input[type="checkbox"]:focus-visible {
    outline: 0.125rem solid #0d79ab;
    outline-offset: 0.125rem;
  }

  /* Radio Button */
  input[type="radio"] {
    border-radius: 50vw;
    position: relative;
  }

  input[type="radio"]::before {
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50vw;
    background-color: #0c1b4b;
    opacity: 0;
    position: absolute;
  }

  input[type="radio"]:checked::before {
    opacity: 1;
  }

  /* Checkbox */
  input[type="checkbox"] {
    border-radius: 0.25rem;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    background-color: #fff;
    display: inline-block;
    box-sizing: border-box;
  }

  input[type="checkbox"]:checked {
    background-color: #000;
    border-color: #000;
  }

  input[type="checkbox"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.3rem;
    height: 0.55rem;
    border: solid #fff;
    border-width: 0 0.125rem 0.125rem 0;
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0;
  }

  input[type="checkbox"]:checked::after {
    opacity: 1;
  }

  /* ------------------------------------ */
  /* MEGAMENU ITEMS HOVER / FOCUS */
  /* ------------------------------------ */

  .header__nav-megamenu-item {
    transition: background-color 0.25s ease-in-out;
  }

  @media (prefers-reduced-motion: reduce) {
    .header__nav-megamenu-item {
      transition: none;
    }
  }

  .header__nav-megamenu-item:hover {
    background-color: var(--bg-light-accent);
  }

  .header__nav-megamenu-item:hover .header__nav-megamenu-heading {
    color: var(--dark-brand);
  }

  .header__nav-megamenu-item:focus-within a {
    box-shadow: none;
    outline: none;
    border: none;
  }

  .header__nav-megamenu-item:focus-within {
    outline: var(--focus-border);
    outline-offset: var(--focus-offset);
  }

  .header__nav-megamenu-item:has(
      .header__nav-megamenu-heading[aria-current="page"]
    ) {
    background-color: var(--bg-light-accent);
  }

  .header__nav-megamenu-item:focus-within .header__nav-megamenu-heading {
    color: var(--dark-brand);
  }

  .header__nav-megamenu-item:focus-within {
    background-color: var(--bg-light-accent);
  }

  .header__nav-megamenu-item:has(
      .header__nav-megamenu-heading[aria-current="page"]
    )
    .header__nav-megamenu-heading {
    color: var(--dark-brand);
  }

  /* ------------------------------------ */
  /* H5 HEADINGS (Überschriften kleiner) */
  /* ------------------------------------ */

  .h5 {
    transition: color 0.25s ease-in-out;
  }

  @media (prefers-reduced-motion: reduce) {
    .h5 {
      transition: none;
    }
  }

  /* ------------------------------------ */
  /* HAUPTNAVIGATION & DROPDOWN HOVER EFFEKTE */
  /* ------------------------------------ */

  .header__nav > .menu-item > .brxe-text-link:not(.btn),
  .header__nav .brx-submenu-toggle:not(.btn) {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: inherit;
    max-width: max-content;
  }

  /* Linie erzeugen */
  .header__nav > .menu-item > .brxe-text-link:not(.btn)::after,
  .header__nav .brx-submenu-toggle:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: var(--brand, currentColor);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }

  /* Hover- und Focus-Effekt */
  /* Grundstil */
  .header__nav > .menu-item > .brxe-text-link:not(.btn),
  .header__nav .brx-submenu-toggle:not(.btn) {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: inherit;
    max-width: max-content;
  }

  /* Linie erzeugen */
  .header__nav > .menu-item > .brxe-text-link:not(.btn)::after,
  .header__nav .brx-submenu-toggle:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: var(--brand, currentColor);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }

  /* Hover/Focus Linie */
  .header__nav > .menu-item > .brxe-text-link:not(.btn):hover::after,
  .header__nav > .menu-item > .brxe-text-link:not(.btn):focus::after,
  .header__nav .brx-submenu-toggle:not(.btn):hover::after,
  .header__nav .brx-submenu-toggle:not(.btn):focus::after {
    transform: scaleX(1);
  }

  /* Textfarbe bei Hover und Focus */
  .header__nav > .menu-item > .brxe-text-link:not(.btn):hover,
  .header__nav > .menu-item > .brxe-text-link:not(.btn):focus,
  .header__nav .brx-submenu-toggle:not(.btn):hover,
  .header__nav .brx-submenu-toggle:not(.btn):focus {
    color: var(--brand);
  }

  /* Sichtbare Linie und Farbe, wenn aria-current="page" */
  .header__nav
    > .menu-item
    > .brxe-text-link:not(.btn)[aria-current="page"]::after,
  .header__nav .brx-submenu-toggle:not(.btn)[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .header__nav > .menu-item > .brxe-text-link:not(.btn)[aria-current="page"],
  .header__nav .brx-submenu-toggle:not(.btn)[aria-current="page"] {
    color: var(--brand);
  }

  /* Megamenu-Spezialfall */
  .brxe-dropdown:has(.header__nav-megamenu-heading[aria-current="page"])
    > .brx-submenu-toggle:not(.btn) {
    color: var(--brand);
  }

  .brxe-dropdown:has(.header__nav-megamenu-heading[aria-current="page"])
    > .brx-submenu-toggle:not(.btn)::after {
    transform: scaleX(1);
  }

  /* Submenu Toggle Flex */
  .brx-submenu-toggle {
    display: flex !important;
  }

  /* Motion Reduce – Transition abschalten */
  @media (prefers-reduced-motion: reduce) {
    .header__nav > .menu-item > .brxe-text-link::after,
    .header__nav .brx-submenu-toggle::after,
    .above-header__link {
      transition: none;
    }
  }

  .bento-card--hover:hover .h5 a {
    color: var(--brand);
  }

  .above-header__link, .bento-card--hover .h5 a {
    transition: 0.25s color ease-in-out;
  }

  .above-header__link[aria-current="page"] {
    color: var(--brand);
  }

  .above-header__link:hover {
    color: var(--brand);
  }

  /* ------------------------------------ */
  /* KARTEN-SPEZIFISCHES HOVER-FEEDBACK */
  /* ------------------------------------ */

  .bento-card--hover,
  .blog-card {
    transition: border 0.25s ease-in;
  }

  /* ------------------------------------ */
  /* CODE BLOCKS WRAPPING AND KEYBOARD */
  /* ------------------------------------ */

  pre.wp-block-code code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  :where(pre.wp-block-code) {
    border-radius: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .bento-card,
    .blog-card {
      transition: none;
    }
  }

  .bento-card--hover:hover,
  .blog-card:hover {
    border: 0.0625rem solid var(--brand);
  }

  .bento-card:focus-within {
    outline: var(--focus-border);
    outline-offset: var(--focus-offset);
  }

  .bento-card:focus-within .h5 {
    color: var(--brand);
  }

  .bento-card:focus-within :focus {
    box-shadow: none;
    outline: none;
    border: none;
  }

  code {
    color: var(--dark-brand);
    background-color: #e1f3fd;
    padding: 0.1em 0.2em;
    border-radius: 0.2em;
  }

  kbd {
    padding: 0.25rem 0.75rem;
    border: 1px solid #e8eaf0;
    border-radius: 0.2em;
  }
}