/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

:root{
    --radius: 0.75rem;
    --button-radius: 999rem;
    --input-radius: 0.25rem;
    --shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04); /* Just a basic general shadow */
    
    --site-width: var(--gb-container-width);
    --site-wrapper: 2400px;
    
    /* Gutter */
    --gutter: clamp(1rem, 0.466rem + 2.034vi, 2.5rem);
    
    /* Gap (between columns) */
    --gap-l: 3rem;
    --gap-m: 2rem;
    --gap-s: 1.5rem;
    --gap-xs: 1rem;
    
    --gap: var(--gap-m);
    
    /* @link https://utopia.fyi/space/calculator?c=360,24,1.2,1240,80,1.25,5,2,&s=0.5,1.5|2|3,s-l&g=s,l,xl,12 */
    --space-xs: 1rem;
    --space-s: clamp(1.5rem, 1.144rem + 1.356vi, 2.5rem);
    --space-m: clamp(3rem, 2.288rem + 2.712vi, 5rem); /* Default, was 4rem */
    --space-l: clamp(4.5rem, 3.432rem + 4.068vi, 7.5rem);
    --space-xl: clamp(6rem, 4.576rem + 5.424vi, 10rem);
    
    /* Font sizes responsive */
    /* https://chrisburnell.com/clamp-calculator/?font-size-root=16&size-min=18&size-max=28&viewport-min=420&viewport-max=1280&relative-units=vi */
    --fontsize-5xl: clamp(3.3667rem, 2.8333rem + 3.3333vw, 5.5rem); /* h1 */
	--fontsize-5xl: clamp(2.25rem, 0.857rem + 5.306vi, 5.5rem);
    --fontsize-4xl: clamp(3rem, 2.1573rem + 3.3709vw, 4.854rem); /* h1 alternative, use either */
    --fontsize-3xl: clamp(1.75rem, 0.946rem + 3.061vi, 3.625rem);
    --fontsize-2xl: clamp(1.5rem, 0.857rem + 2.449vi, 3rem);
    --fontsize-xl: clamp(1.25rem, 0.714rem + 2.041vi, 2.5rem);
    --fontsize-l: clamp(1.125rem, 0.857rem + 1.02vi, 1.75rem);
    /*--fontsize-m: clamp(1.125rem, 0.809rem + 1.2641vw, 1.7203rem);
    --fontsize-m: clamp(1.125rem, 0.881rem + 0.93vi, 1.625rem);*/
    --fontsize-m: clamp(1rem, 0.786rem + 0.816vi, 1.5rem);
    --fontsize-s: clamp(0.875rem, 0.714rem + 0.612vi, 1.25rem);
    --fontsize-xs: clamp(0.875rem, 0.768rem + 0.408vi, 1.125rem);
    --fontsize-2xs: clamp(0.625rem, 0.464rem + 0.612vi, 1rem);
}

/* Admin Styles */
.block-editor-block-list__block.badge-score{
 text-indent: -9999px;
}

/* Stable scrollbars on windows */
html, body {
    scrollbar-gutter: stable;
}

.shadow{
    box-shadow: var(--shadow);
}

.truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

.screen-reader-text:focus {
    background-color: var(--color-background);
    border-radius: 15em;
    box-shadow: none;
    clip: auto!important;
    clip-path: none;
    color: var(--color-primary);
    display: block;
    border: none;
    font-size: 64%;
    font-weight: 700;
    letter-spacing: -.02em;
    height: auto;
    left: 1em;
    line-height: normal;
    padding: .5em 1em;
    text-decoration: none;
    top: 1em;
    width: auto;
    z-index: 100000
}

body :focus-visible,
body .wsf-button:focus-visible {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--color-primary);
    outline-offset: 2px
}

body .wsf-button:focus-visible,
body .button-accent:focus-visible {
    outline-color: var(--color-primary)
}

body :not(.gb-button,.site-logo a,.wsf-button):focus-visible,
body .mobile-nav-items a:focus-visible,
body a.button-text:focus-visible {
    outline: thin dotted currentcolor;
    outline-color: currentcolor;
    outline-style: dotted;
    outline-width: thin
}

body, button, input, select, textarea {
    -webkit-font-smoothing: antialiased;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

video {
    height: auto;
    max-width: 100%;
    width: 100%;
    vertical-align: top;
	aspect-ratio: unset!important;
}

select::-ms-expand { display: none; }

body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: greyscale;
    height: 100vh;
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: 'ss02' 0;
}

/* Headline */
h1, h2, h3, h4, h5, h6, .is-h1, .is-h2, .is-h3, .is-h4, .is-h5, .is-h6 { margin: 0; letter-spacing: -0.02em; margin-bottom: 0.25em; }
/*h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .is-h1 a, .is-h2 a, .is-h3 a, .is-h4 a, .is-h5 a, .is-h6 a { font-weight: inherit; color:inherit; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .is-h1 a:hover, .is-h2 a:hover, .is-h3 a:hover, .is-h4 a:hover, .is-h5 a:hover, .is-h6 a:hover { color:inherit; }*/

h1, .is-h1 { font-size: var(--fontsize-5xl); line-height: 1.05; letter-spacing: -0.06em; }
h2, .is-h2 { font-size: var(--fontsize-3xl); line-height: 1.22; letter-spacing: -0.04em;  }
h3, .is-h3 { font-size: var(--fontsize-2xl); line-height: 1.27; letter-spacing: -0.04em;  }
h4, .is-h4 { font-size: var(--fontsize-xl); line-height: 1.3; letter-spacing: -0.04em; }
h5, .is-h5 { font-size: var(--fontsize-l); line-height: 1.47; letter-spacing: -0.03em; }
h6, .is-h6 { font-size: var(--fontsize-m); line-height: 1.55; letter-spacing: -0.03em; }

.is-p{
    font-family: inherit; /* copy from the body */
    font-size: inherit; /* copy from the body */
    line-height: inherit;
    color: var(--color-text-muted);
    font-weight: 400; /* copy from the body */
    letter-spacing: 0; /* copy from the body */
    margin: 0;
    margin-bottom: 1.5em;
}


b,strong {
    font-weight: 600;
}

/* Button Reset
button, button:focus, button:hover {
    -webkit-appearance: none;
    border-radius: 0;
    text-align: inherit;
    background: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    border: none;
    color: inherit;
    font: inherit;
}  */

button{
    all: unset;
    cursor: pointer;
}

.text-stroke {
    -webkit-text-stroke: 3px var(--color-grey-900);
    -webkit-text-fill-color: white;
    paint-order: stroke fill;
}



/* -------------------------------------------------------------------------------
   Marquee
---------------------------------------------------------------------------------- */
.marquee { --gap: 0.2em; display: flex; gap: var(--gap); overflow: hidden; position: relative; }
.marquee-content { animation: scroll 60s linear infinite; display: flex; align-items: center; flex-shrink: 0; gap: var(--gap); justify-content: space-around; min-width: 100%; white-space: nowrap; will-change: transform; }
.marquee-content-item { white-space: nowrap; }
.marquee.logo-marquee { --gap: 2.5em; }
.marquee.logo-marquee img { height: 80px; }

@-webkit-keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% - var(--gap))); }
}
@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% - var(--gap))); }
}

.marquee-reverse .marquee-content { animation-direction: reverse; }

/* -------------------------------------------------------------------------------
   Theme Tweaks
---------------------------------------------------------------------------------- */
.site-header {
    padding-inline: var(--gap);
}

/* Constrain the width of the page if wanted */
.site-wrapper {
    width: 100%;
    max-width: var(--site-wrapper);
    margin-inline: auto;
    background: var(--color-background);
    overflow: hidden;
}

@media screen and (min-width: 2400px) {
    .site-wrapper::after {
        content: "";
        display: block;
        width: calc((100% - var(--site-wrapper)) / 2 + 0px);
        height: 100%;
        background: var(--color-outer-background);
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1;
    }
    .site-wrapper::before {
        content: "";
        display: block;
        width: calc((100% - var(--site-wrapper)) / 2 + 0px);
        height: 100%;
        background: var(--color-outer-background);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1;
    }
}

/* -------------------------------------------------------------------------------
   Comments (Leave it in even if you don't use comments)
---------------------------------------------------------------------------------- */
.comments-area{
    margin-left: auto;
    margin-right: auto;
    max-width: min(calc(100vw - var(--gutter) * 2), var(--site-width));
    width: 100%;
    padding-bottom: var(--space-m);
}

#comments{
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

.comment-meta .avatar{
    max-width: 64px;
    flex-shrink: 0;
    margin-right: 1em;
}

.comment-meta{
    display: flex;
    align-items: center;
}

.comment-content{
    padding: 0;
    border: none;
    margin-top: 1.5em;
}

.comment-form input, .comment-form-comment {
    margin-bottom: 1.5em;
}

/* -------------------------------------------------------------------------------
   Utilities
---------------------------------------------------------------------------------- */
/* Balance headings and elements with .balance class */
:is(h1, h2, h3, h4, h5, h6), .balance {
    text-wrap: balance;
    overflow-wrap: break-word;
}

/* Use pretty wrapping for body text elements */
p, blockquote, li, .pretty {
    text-wrap: pretty;
}

/* Remove bottom margin from final paragraph */
p:last-child:last-of-type {
    margin-bottom: 0;
}

/* Line Limit */
.line-limit-3, .line-limit-2{
    display: -webkit-box;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-limit-3{
    line-clamp: 3;
    -webkit-line-clamp: 3;
}

.line-limit-2{
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

/* Icon without fill */
html .icon-nofill svg, html .gb-icon svg, .nofill, .nofill svg{
    fill: none!important;
}

/* No Underline */
.no-ul, .no-ul a{
    text-decoration: none;
}

/* Noselect */
.noselect {
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}

/* Horizontal Divider */
hr, hr.wp-block-separator {
    background-color: var(--color-grey-200);
    border: 0;
    height: 1px;
    margin-bottom: var(--space-m);
    margin-top: var(--space-m);
}

/* Vertical Text */
.vertical{
    white-space: nowrap;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Rotation */
.rotate{
    transform-origin: center;
    animation: rotate 28s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Remove Transitions (for example for the Infobox) */
.no-transition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
    animation: none !important;
}

/* Visually Hidden (accessible to screen readers) */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Smooth Transition Utility */
.transition {
    transition: all 0.25s ease;
}

/* Stretch Link */
.stretch-link {
    position: relative;
}

.stretch-link a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
}

.stretch-link a:is(:focus-visible)::after {
    outline: 2px solid;
}

.stretch-link a:is(:hover, :focus) {
    outline: none;
}

/* -------------------------------------------------------------------------------
   Accordion
---------------------------------------------------------------------------------- */
body:not(.wp-admin) .gb-accordion__content {
    transition: color 0.3s ease, max-height .7s cubic-bezier(.2,1,.22,1)!important;
}

body:not(.wp-admin) .gb-accordion__content>div {
    will-change: opacity;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s cubic-bezier(.2,1,.22,1) , transform .7s cubic-bezier(.2,1,.22,1)
}

body:not(.wp-admin) .gb-accordion__item-open .gb-accordion__content>div {
    opacity: 1;
    transform: translateY(0)
}

body:not(.wp-admin) .gb-accordion__content {
    visibility: visible!important
}

/* -------------------------------------------------------------------------------
   Forms
------------------------------------------------------------------------------- */
input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
    display: block;
    border: 0;
    border-radius: var(--input-radius);
    padding: 1rem 1rem;
    height: auto;
    font-size: var(--fontsize-s);
    font-weight: 400;
    font-family: inherit;
    width: 100%;
    max-width: 100%;
    background-color: var(--color-white);
    color: var(--color-text);
    border: 1px solid var(--color-grey-400);
    transition: color 0.3s ease, border 0.3s ease, background-color 0.3s ease;
    outline: 0!important;
}

input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=url]:focus, select:focus, textarea:focus{
    background-color: var(--color-white);
    border-color: var(--color-grey-700);
    outline: 0!important;
}

form button[type="submit"], .comment-form input[type="submit"]{
    align-items: center;
    background-color: var(--color-primary);
    color: var(--color-white);
    border:none;
    border-radius: var(--button-radius);
    display: inline-flex;
    font-family: inherit;
    font-size: var(--fontsize-m);
	font-weight: 600;
    justify-content: center;
    transition: transform 0.3s ease 0s;
    will-change: transform;
    column-gap: 0.5rem;
    display: inline-flex;
    font-weight: 400;
    justify-content: center;
    padding: 0.5rem 1rem;
    row-gap: 0.5rem;
    transition: all 0.3s ease 0s;
}

form button[type="submit"]:is(:hover,:focus) {
    background-color: var(--color-primary-alt);
    color: var(--color-white);
}

/* Placeholder */
::placeholder{color:rgb(from var(--color-grey-900) r g b / 0.6);}
:-ms-input-placeholder{color:rgb(from var(--color-grey-900) r g b / 0.6);}
::-ms-input-placeholder{color:rgb(from var(--color-grey-900) r g b / 0.6);}

/* Checkbox */
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--color-grey-300);
    margin: 0;
    flex-shrink: 0;
    font: inherit;
    color: currentColor;
    width: 1em;
    height: 1em;
    border-radius: var(--input-radius);
    transform: translateY(.25em);
    display: grid;
    place-content: center;
    transition: border 0.2s ease;
    cursor: pointer;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: transform 0.2s ease;
    background-color: var(--color-primary);
    transform-origin: center center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked::before {
    transform: scale(0.8);
}

input[type="checkbox"]:checked{
    border-color: var(--primary);
}

input[type="checkbox"] + label{
    cursor: pointer;
}

/* Radio button */
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--color-grey-300);
    margin: 0;
    flex-shrink: 0;
    font: inherit;
    color: currentColor;
    width: 1em;
    height: 1em;
    border-radius: 50%; /* Changed to 50% for circular shape */
    transform: translateY(.25em);
    display: grid;
    place-content: center;
    transition: border 0.2s ease;
    cursor: pointer;
}

input[type="radio"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: transform 0.2s ease;
    background-color: var(--color-primary);
    transform-origin: center center;
    border-radius: 50%; /* Made the dot circular */
}

input[type="radio"]:checked::before {
    transform: scale(0.8);
}

input[type="radio"]:checked {
    border-color: var(--primary);
}

input[type="radio"] + label{
    cursor: pointer;
}

/* Select */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999999' d='M10.293,3.293,6,7.586,1.707,3.293A1,1,0,0,0,.293,4.707l5,5a1,1,0,0,0,1.414,0l5-5a1,1,0,1,0-1.414-1.414Z'/%3E%3C/svg%3E");
    background-size: .6em;
    background-position: calc(100% - 0.5em) center;
    background-repeat: no-repeat;
    padding-right: 2em;
}

.select::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: var(--select-arrow);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

/* Search */
input[type="search"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23171717' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-position: 0.75em calc(50% - 0.01em);
    background-repeat: no-repeat;
    background-size: 1.2em;
    padding-left: 3rem;
}

/* -------------------------------------------------------------------------------
   Custom CSS for AWO
------------------------------------------------------------------------------- */
/* Overlay */
.overlay {
  content: "";
  position: fixed;
  inset: 0;
  background-color: var(--color-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 90;
  will-change: opacity;
}

@media screen and (max-width: 1024px) {
	.overlay{
		display: none!important;
	}
}

body[data-gb-menu-open="full-overlay"] .overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile menu toggle button position */
:where(.gb-navigation[data-gb-mobile-menu-type=full-overlay]) .gb-menu-container--mobile .gb-menu-toggle--clone{
    top: var(--space-s);
    right: var(--space-s);
}

/* Megamenu mobile width limit */
.menu-item-has-gb-mega-menu .gb-overlay--anchored{
    width: 100%;
}

/* More space below opened submenu items on mobile
.gb-navigation.gb-navigation--mobile.gb-navigation--open .gb-sub-menu--open{
    margin-bottom: 1.5rem!important;
} */

.gb-menu-container--mobile .mega-menu {
    grid-template-columns: 1fr;
    width: 100%;
}

/* Remove strange offset */
:where(.gb-navigation[data-gb-mobile-menu-type=full-overlay]) .gb-menu-container--mobile .gb-menu-toggle--clone+.gb-menu {
    margin-top: 0 !important;
}

/* Navigation Text Decoration */
.gb-navigation .gb-menu-container .menu-item a:not(.btn){
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
    text-decoration-color: transparent;
    transition: text-decoration-color .1s ease-in-out;
}

.gb-navigation .gb-menu-container .menu-item a:not(.btn):hover{
    text-decoration-color: currentColor;
}

/* Text Decoration */
a, .underline {
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
    text-decoration-color: color-mix(in srgb, currentColor 20%, transparent);;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, text-decoration 0.25s ease;
}

a:hover, .underline:hover{
    text-decoration-color: currentcolor;
}

/* Overwrite standard GP site containers to match the .section-m class */
.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header {
    padding: var(--space-m) 0px var(--space-m) 0px;
}

body:not(.full-width-content) .site{
    max-width: min(calc(100vw - var(--gutter) * 2), var(--site-width));
}


/* Stick footer to bottom */
.site-wrapper{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.container.grid-container {
  flex-grow: 1;
    align-self: stretch;
    width: 100%;
}
span.zuviel {
    display: none
}

span.drehen {
    unicode-bidi: bidi-override;
    direction: rtl
}

body > .site{

}

table{
    border: 0;
    overflow: hidden;
    margin: 0;
}

table th, table td{
    word-break: keep-all;
    white-space: nowrap;
}

table thead tr th{
    padding: 8px 24px 8px 16px;
}

table.tablesorter thead tr th{
    border-color: var(--color-grey-900);
}

table td{
    padding: 0.5em 0.25em;
    border-color: var(--color-grey-900);
}

.archive-loop-grid{
    display: grid;
    column-gap: 2em;
    row-gap: 2em;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media screen and (max-width: 1024px) {
    .archive-loop-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 768px) {
    .archive-loop-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.archive-loop-grid .paging-navigation{
    grid-column: 1 / -1;
}

.archive-loop-grid .page-header{
    display: none;;
}

/* Responsive Table
To use effectively:
<td data-label="Name">John Doe</td>
<td data-label="Age">30</td>
 */
@media screen and (max-width: 768px) {
  table.responsive-table, table.responsive-table thead, 
  table.responsive-table tbody, 
  table.responsive-table th, 
  table.responsive-table td, 
  table.responsive-table tr {
    display: block;
  }
  
  table.responsive-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  table.responsive-table tr {
    text-align: center;
    padding: 2em 0;
    border-bottom: 1px solid var(--color-grey-900);
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 1em;
  }
  
  table.responsive-table td {
    width: 100%!important;
    border: none;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  table.responsive-table.artikel-matrix td {
    display: block;
  }

  table.responsive-table{
      padding: 0;
  }
  
  table.responsive-table td:before {
    content: attr(data-label);
    position: absolute;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
    text-align: left;
  }

  table.responsive-table td[data-label]{
      text-align: right;
  }

  table.responsive-table.ranking-table img{
      height: 144px;
      max-width: 100%;
  }

  .artikel-matrix .ranking-table-img img{
      height: 144px!important;
      max-width: 100%!important;
  }

  .artikel-matrix .ranking-table-title{
      text-align: center!important;
      font-weight: normal;
    font-family: var(--gp-font--perfectly-nineties);
    font-size: 140%;
    margin-bottom: 0.5em;
  }
}

.artikel-matrix,
.artikel-matrix td,
.artikel-matrix th{
    text-align: left;
    padding: 4px 12px;
    border:1px solid #000;
    border-collapse: collapse;
}

.artikel-matrix td{
    font-family: var(--gp-font--geist-mono);
    font-size: 14px;
    font-weight: normal;
}

.artikel-matrix th{
    padding-right: 24px;
    background-color: rgba(0,0,0,0.1);
    font-size: 18px;
    font-weight: 700;
}

.artikel-matrix .ranking-table-img{
    text-align: center;
    width: 1px;
    white-space: nowrap;
}

.artikel-matrix .ranking-table-img img{
    height: 36px;
    object-fit: contain;
    min-width: 36px;
    max-width: 36px;
    vertical-align: middle;
}

.artikel-matrix td.cell-right{
    text-align: right;
    width: 1px;
    white-space: nowrap;
}

.artikel-matrix .ranking-table-score{
    width: 1px;
    white-space: nowrap;
    text-align: center!important;
}
.artikel-matrix .ranking-table-score svg{
    vertical-align: top;
    height: 36px;
    width: 36px;
}

.scrollbox {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/*
.shadow-scroll-x::-webkit-scrollbar {
  height: 6px;
  background-color: rgba(0,0,0,0.1);
}
.shadow-scroll-x::-webkit-scrollbar-thumb {
  background-color: var(--color-grey-900);
  border-radius: 3px;
}
.shadow-scroll-x::-webkit-scrollbar-button {
  display: none;
}*/

@media screen and (max-width: 768px) {
    .scrollbox{
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        padding-bottom: 24px;
        padding-left: 24px;
        padding-right: 24px;
        width: 100vw; /* full viewport width */
        max-width: 100vw; /* ensure no extra horizontal scroll */
    }
}

.instagram-testimonials.instagram-testimonials-columns .scrollbox > div{
     margin: 0 0 1em 0!important;
}

.instagram-testimonials iframe{
    display: none!important;
    margin: 0!important;
}

.instagram-testimonials iframe.instagram-media-rendered{
    display: block!important;
    border: 1px solid black!important;
    margin: 0!important;
    border-radius: 8px!important;
}

.instagram-testimonials.instagram-testimonials-columns .scrollbox{
    display: block;
    -moz-column-gap: 1em;
       column-gap: 1em;
  -moz-column-width: 50%;
       column-width: 50%;
  -moz-column-count: 2;
       column-count: 2;
}

.instagram-testimonials.instagram-testimonials-columns .scrollbox > div{
    -moz-column-break-inside: avoid;
       break-inside: avoid;
}

@media screen and (max-width: 768px) {
    .instagram-testimonials.instagram-testimonials-columns .scrollbox{
        -moz-column-count: 1;
       column-count: 1;
       text-align: center;
    }
    .instagram-testimonials.instagram-testimonials-columns .scrollbox > div{
        text-align: center;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .instagram-testimonials.instagram-testimonials-columns .scrollbox > div iframe{
        width: 100%!important;
        max-width: 100%!important;
    }
}

.nolist ul, ul.nolist{
    list-style: none;
}

.table-filter label{
    cursor: pointer;
    user-select: none;
}


/* Root variables */
:root {
    --box-padding: 40px;
}

.gb-container .gb-query-loop-item a:not(.gb-button):hover{
    color: var(--link);
}

html .wp-block-separator, hr {
    border-top: none;
    padding: 0 0!important;
    margin: var(--space-m) 0!important;
  border: none;
  height: 1px;
    background-color: var(--color-grey-300);
}

.gb-container-35ba13ec {
    outline: 4px solid var(--mark);
}

/*html {
    scroll-behavior: smooth;
    scroll-padding-top: 40px;
}*/

.has-text-align-center{
    text-align: center;
}

.nounderline, .no-underline, .nounderline a, .no-underline a {
    text-decoration: none!important; 
}

code {
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 8px;
}

.balance{
    text-wrap: balance;
}


/* Image and gallery styles */
.inside-article .entry-content > .gb-block-image,
.dynamic-content-template > .gb-block-image {
    margin-bottom: 24px;
    margin-top: 24px;
}

.inside-article .entry-content > .gb-block-image img,
.dynamic-content-template > .gb-block-image img,
.gallery-one-row img, img.shadow-img, img.img-shadow, .shadow-img img, .img-shadow img {
    display: block;
    vertical-align: top;
    border-radius: 5px;
    margin-bottom: 2em;
    box-shadow: 0 6.4px 14.4px 0 rgb(0 0 0 / 13%), 0 1.2px 3.6px 0 rgb(0 0 0 / 11%);
}

article.hoster .content-main p > img {
    margin-top: 40px;
}

.gallery-one-row {
    flex-wrap: nowrap;
    height: 200px; /* Adjust the height as needed */
}

.wp-block-image .alignright{
    margin: 0 0 0 2em!important;
}

.gallery-one-row img,
.gallery-two-row img,
.gallery img,
.wp-block-image img {
    flex: 1;
    width: auto;
    display: block;
    vertical-align: top;
    border-radius: 5px;
    box-shadow: 0 6.4px 14.4px 0 rgb(0 0 0 / 13%), 0 1.2px 3.6px 0 rgb(0 0 0 / 11%);
}

/* Two-row layout */
.gallery-two-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 24px;
    grid-row-gap: 24px;
}

.gallery-two-row figure:first-child {
    grid-column: 1 / -1;
}

/* Gallery one three */
.gallery-one-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 24px;
    grid-row-gap: 24px;
}

.gallery-one-three figure:first-child {
    grid-column: 1 / -1;
}

/* Responsive adjustments for galleries */
@media (max-width: 768px) {
    .gallery-one-row,
    .gallery-two-row {
        grid-template-columns: 1fr;
    }
    
    .gallery-two-row figure:first-child {
        grid-column: auto;
    }
}

/* Baguette Box styles */
#baguetteBox-slider {
    display: flex;
    justify-content: center;
    align-items: center;
}

#baguetteBox-overlay .full-image {
    max-width: 1368px;
    margin: auto;
    padding: 24px;
}

#baguetteBox-overlay {
    background-color: rgba(247, 248, 247, 0.75)!important;
    background-color: rgba(17, 24, 38, 0.4)!important;
}

#baguetteBox-overlay .full-image img {
    border-radius: 8px;
    box-shadow: 0 6.4px 14.4px 0 rgb(0 0 0 / 13%), 0 1.2px 3.6px 0 rgb(0 0 0 / 11%);
}

.baguetteBox-button {
    background-color: transparent!important;
    color: #ffffff!important;
    height: 40px!important;
    width: 40px!important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.baguetteBox-button svg {
    position: relative;
    stroke: #ffffff!important;
}

.baguetteBox-button svg g {
    stroke: #ffffff!important;
}

/* Typography styles */
p + h2, ul + h2, ol + h2 {
    margin-top: 1.2em;
}

p + h3, ul + h3, ol + h3 {
    margin-top: 2em;
    margin-bottom: 0.5em!important;
}

/* List styles
ul.wp-block-list,
.dynamic-entry-content ul,
.inside-article ul,
ol.wp-block-list,
.dynamic-entry-content ol,
.inside-article ol*/
ul, ol{
    margin-left: 1em;
} 

/*ul.wp-block-list li,
.dynamic-entry-content ul li,
.inside-article ul li {
  list-style-type: '→';
  padding-inline-start: 0.5ch;
}*/

ul.list2 {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Form styles */
input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
    border-radius: 0.5em;
    outline: 0px solid transparent;
    transition: all 0.3s ease;
    padding: 1em;
    outline-offset: 0;
    vertical-align: top;
      border: 1px solid var(--color-grey-900);
}

input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
    border: 1px solid var(--color-grey-900);
    outline: 0px solid;
}

html input[type=search]:focus {
    outline: 0px solid transparent!important;
}

button, input[type=button], input[type=reset], input[type=submit] {
    border-radius: 999px;
    font-weight: 700;
    padding: 12px 24px;
    background-color: var(--button);
    color: var(--button-color);
}

input[type=button], input[type=reset], input[type=submit] {
    border: 0px;
    cursor: pointer;
    -webkit-appearance: button;
    padding: 0.75em 1.5em;
    border-radius: 999px;
    font-size: 1em;
    font-weight: 700;
}

/* Fluent Form styles */
html .fluentform .ff-el-input--label {
    margin-bottom: 6px;
    font-weight: 700;
}

html .fluentform .ff-el-is-error .text-danger {
    font-size: 14px;
    font-weight: 700;
    color: var(--contrast-3);
    margin-top: 6px;
}

html .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
    color: var(--contrast-3);
}

@media (min-width: 768px) {
    html .frm-fluent-form .ff-t-container {
        gap: 16px;
        align-items: flex-start;
    }
}

/* Search widget styles */
.wp-block-search__label {
    display: block;
    margin-bottom: 16px;
}

html input.wp-block-search__input {
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
}

html .wp-block-search__button {
    margin-left: -1px;
    border-radius: 0.5em;
    padding: 0 2em;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.wp-block-search__button {
    display: flex;
    width: 56px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 256 256'%3E%3Cpath fill='%23ffffff' d='M232.49 215.51L185 168a92.12 92.12 0 1 0-17 17l47.53 47.54a12 12 0 0 0 17-17ZM44 112a68 68 0 1 1 68 68a68.07 68.07 0 0 1-68-68'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    color: transparent !important;
}

/* Modal styles */
html .gp-modal__container{
    transition: transform .5s cubic-bezier(.23,.46,.4,1)!important;
}

html .gp-modal--open:not(.gp-modal--transition) .gp-modal__container{
    
}
html .gp-modal__overlay {
    backdrop-filter: none;
    background: rgba(255, 251, 246, 0.8)!important;
}

html .gp-search-modal .gp-modal__overlay{
    padding-top: 72px;
}

html .search-modal-form {
    width: 1120px;
      padding: 0;
    border-radius: 8px;
    overflow: hidden;
    border:1px solid var(--color-grey-900);
    background-color: var(--background);
}

.search-modal-form .search-field, 
.search-modal-form .search-field:focus {
    width: 100%;
    height: 60px;
    background-color: #FFFBF5;
      border-radius:0;
    appearance: none;
    color: currentColor;
}


html input[type=search]{
	border: none!important;
}

.search-result-wrapper{
	position: relative;
}

.search-result-wrapper a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
}

/* Misc styles */
.score:empty {
    display: none;
}

.rate-8 {
    background-color: var(--secondary);
    color: var(--contrast);
}

.rate-10 {
    background-color: var(--secondary-dark);
    color: var(--contrast);
}

.rate-6 {
    background-color: var(--yellow);
    color: var(--contrast);
}

.rate-3 {
    background-color: var(--red);
    color: var(--contrast);
}

.box-hover {
    outline: 4px transparent;
}

.box-hover:hover {
    outline: 4px solid var(--accent-10);
}

.entry-meta, .entry-meta a {
    color: var(--contrast-3);
    text-decoration: none;
}

.about-images {
    float: right;
    margin-left: 40px;
}

.about-video {
    min-width: 130px;
    max-width: 24%;
    float: right;
    margin-left: 40px;
}

.inside-right-sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px;
}



/* Entry content styles */
.entry-content h2 img {
    height: calc(1em + 8px);
    width: auto!important;
    margin-left: 8px;
    vertical-align: bottom;
}

/* Last updated styles */
.last-updated {
    display: inline-block;
    color: var(--contrast-3);
    opacity: 0.7;
}

.entry-header + .last-updated {
    margin-top: 16px;
}

/* Entry content spacing */
.post-image:not(:first-child),
.page-content:not(:first-child),
.entry-content:not(:first-child),
.entry-summary:not(:first-child),
footer.entry-meta,
.entry-content h1:first-child + p,
.dynamic-content-template h1:first-child + div {
    margin-top: 24px;
}

/* Newsletter signup styles */
.sib_signup_box_inside_1 {
    display: flex;
    width: 100%;
}

.sib-email-area {
    flex: 1;
    width: 320px;
    max-width: 100%;
}

.sib_signup_box_inside_1 > p:last-child {
    margin-left: 12px;
}

.sib-email-area input {
    width: 100%;
}

/* Protein Rechner */
#proteinForm, #calorieForm{
    
}
#proteinForm > div, #calorieForm > div{
    display: flex;
    align-items: center;
    border-bottom: 1px solid;
}

#proteinForm > div label,
#calorieForm > div label{
    border-right: 0px solid; 
    padding: 1em;
    font-weight: 700;
    width: 400px; max-width: 100%;
    border-right: 1px solid;
	font-size: 80%;
}

#proteinForm > div input,
#proteinForm > div select,
#calorieForm > div input,
#calorieForm > div select{
    border: 0;
    width: 100%;
    border-radius: 0;
    outline: none;
    background: transparent;
}

#proteinForm button[type=submit],
#calorieForm button[type=submit]{
    width: 100%;
    border-radius: 0;
	font-weight: 600;
	padding: 0.5em 1em;
}

#proteinResult:not(:empty),
#calorieForm + #result:not(:empty){
    padding: 2em 0;
}

.protein-attribute a{
 border-radius: 999px;
    border: 1px solid;
    text-decoration: none;
    padding: 0.5em 0.75em;
    font-family: var(--gp-font--geist-mono);
    font-size: 16px;
    letter-spacing: -0.03em;
    font-weight: 700;
}

/*.protein-attribute .term-abnehmen a{ background-color: #93AEF7; }
.protein-attribute .term-lecker a{ background-color: #FFD24C; }

.protein-attribute .term-muskelaufbau a{ background-color: #FAAE64; }

.protein-attribute .term-regeneration a{ background-color: #F3CEF9; }

.protein-attribute .term-vegan a{ background-color: #C3D80E; }*/

/* Guestbook */
.page-id-3592 #commentform #author {
    display: none;
}

.page-id-3592 #comments{
    font-family: var(--gp-font--geist-mono);
    font-size: 16px;
    letter-spacing: -0.03em;
}

.page-id-3592 #comments{
    display: flex;
    gap: 5em;
}

@media screen and (max-width: 1024px) {
    .page-id-3592 #comments{
    display: flex;
            flex-direction: column;
    gap: 3em;
    }

}

.page-id-3592 #comments .comment-body{
    padding: 0;
    display: flex;
    flex-direction: column-reverse;
}

.page-id-3592 #comments .comment-content{
    padding: 0;
    margin: 0;
    border: 0;
}

.page-id-3592 #comments .comment-list{
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.page-id-3592 #comments .comment-content > p{
    margin: 0;
}

.page-id-3592 .comments-area{
    margin: 0!important;
}

.page-id-3592 .comment-meta-simplified{
    font-size: 80%;
    font-weight: 700;
}

.page-id-3592 .comment-author-info{
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.page-id-3592 .comment-meta{
    display: none;
}

/* Pagination */
.nav-links{
    display: flex;
    justify-content: center;
    gap: 0.5em;
}

.nav-links > * {
    display: flex;
  align-items: center;
    gap: 0.5em;
    padding: 0.2em 0.75em!important;
    border: 1px solid;
    border-radius: 0.25em;
    text-decoration: none;
    font-family: var(--gp-font--geist-mono);
    font-size: 14px;
    font-weight: 400!important;
}

.results-other{
    display: flex;
    flex-direction: column;
    align-items: center;
}


.results-other > span{
    padding: 0!important;
}

.navigation-stick.sticky-nav-scrolling-up{
    position: fixed!important;
    top: 0!important;
}

.footer-bar a{ white-space: nowrap; }

/* Sticky Button on Artikel Single Page */
@media screen and (max-width: 768px) {
    .gb-container-75305eaf{
		position: sticky;
		bottom: 8px;
		z-index: 100;
	}
    
    .rate-circle-big{
        transform: translate3d(140%, -60%, 0px);
    }
}

.accordion-big:before,
.accordion-big:after,
.accordion-big > div:not(:last-child):after{
content: '';
    display:block;
    border-top: none;
    padding: 0 0 !important;
    padding: 0 !important;
    border: none;
    height: 1px;
    background-color: transparent;
    background-image: linear-gradient(to right, #000 50%, rgba(255, 255, 255, 0) 0%);
    background-position: center;
    background-size: 10px 1.3px;
    background-repeat: repeat-x;
}

/* ----------------------------------------------------------------------------- */
/* Marken Grid maybe?? */
/* ----------------------------------------------------------------------------- */
.marken-item{
    position: relative;
}

.marken-link{
    position: absolute;
    z-index: 1;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.marken-item-text{
    margin-bottom: 2em;
}

.marken-item-link{
    margin-top: auto;
    font-size: 88%;
    font-weight: bold;
    text-decoration: none;
}

/* ----------------------------------------------------------------------------- */
/* Marke Logo */
/* ----------------------------------------------------------------------------- */
.marke-logo{
    display: flex;
    margin: auto;
    height: auto;
    max-height: 24px;
    width: auto;
    max-width: 120px;
    vertical-align: top;
    margin-bottom: 1em;
}

/* ----------------------------------------------------------------------------- */
/* Influencer Code */
/* ----------------------------------------------------------------------------- */
.influencer-code-single{
    text-align: center;
}

.influencer-code-single .marke-logo{
    max-height: 48px;
    width: auto;
    max-width: 160px;
}

.couponcode-form{
    display: flex;
    margin-top: 2em;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.couponcode-form input{
    width: 100%;
    font-size: 140%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
.couponcode-form button{
    display: flex;
    align-items: center;
    background: transparent;
    color: var(--color-grey-900);
    border-radius: 0;
    padding-left: 0.5em;
    padding-right: 0.5em;
    display: flex;
}

.invalid-code{
    display: block;
    margin-top: 1em;
    font-family: var(--gp-font--geist-mono);
    font-size: 14px;
}

.influencer-code-button{
    margin-top: 1em;
}

/* ----------------------------------------------------------------------------- */
/* Marke Details */
/* ----------------------------------------------------------------------------- */
.marke-details-list{
    list-style: none;
    display: flex;
    gap: 2em;
    justify-content: center;
}

.marke-details-list a{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
    font-weight: 700;
}

.marke-details-list a svg{
    height: 1em;
    width: auto;
}

/* ----------------------------------------------------------------------------- */
/* Other */
/* ----------------------------------------------------------------------------- */
.line-limit-2{
    -webkit-line-clamp: 2;
}

.line-limit-3{
    -webkit-line-clamp: 3;
}

p, blockquote, li{
    text-wrap: pretty;
}

.toggled .menu-item-has-children .dropdown-menu-toggle{
    padding-left: 0;
}

@media (max-width: 1024px) {
    .gb-grid-wrapper > .gb-grid-column-9d6940b4 {
        width: 100%;
    }
}

/* Simple Load More Button */
.pagination-infinite-button-wrapper {
  text-align: center;
  margin: 2em 0 0 0;
}

.load-more-btn:disabled {
  background: var(--neutral-300);
  cursor: not-allowed;
}

.no-more-items {
  display: block;
  text-align: center;
  font-family: var(--gp-font--geist-mono);
  font-size: 14px;
  color: #04B701;
  font-weight: bold;
}




/* ----------------------------------------------------------------------------- */
/* WordPress Default Elements */
/* ----------------------------------------------------------------------------- */

/* Embed */
.dynamic-entry-content embed, .dynamic-entry-content iframe, .dynamic-entry-content object{
    border-radius: 0.5em;
    box-shadow: var(--shadow-img);
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 1em auto;
    display: block;
}

/* Gallery */
:root {
   --gallery-gap: 1em;
}

/* Base Gallery Layout */
.wp-block-gallery.has-nested-images {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gallery-gap, 1em)!important;
   margin: 2em 0;
   padding: 0;
}

/* Each Image Container */
.wp-block-gallery.has-nested-images figure.wp-block-image {
   display: flex;
   margin: 0;
   position: relative;
   flex-grow: 1;
}

/* Image Styling */
.wp-block-gallery.has-nested-images figure.wp-block-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Column Layouts with row filling */
@media (min-width: 769px) {
   /* 2 columns */
   .wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image {
       flex-basis: calc(50% - (var(--gallery-gap) / 2));
       flex-grow: 1;
   }
   
   /* 3 columns */
   .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image {
       flex-basis: calc(33.33% - (var(--gallery-gap) * 2 / 3));
       flex-grow: 1;
   }
   
   /* 4 columns */
   .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image {
       flex-basis: calc(25% - (var(--gallery-gap) * 3 / 4));
       flex-grow: 1;
   }

   /* 5 columns */
   .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image {
       flex-basis: calc(20% - (var(--gallery-gap) * 4 / 5));
       flex-grow: 1;
   }

   /* 6 columns */
   .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image {
       flex-basis: calc(16.66% - (var(--gallery-gap) * 5 / 6));
       flex-grow: 1;
   }

   /* Last row behavior */
   .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:nth-last-child(-n+2):first-child,
   .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:nth-last-child(-n+2):first-child ~ figure.wp-block-image {
       flex-basis: calc(50% - (var(--gallery-gap) / 2));
   }

   .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:nth-last-child(1):first-child,
   .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:nth-last-child(1):first-child ~ figure.wp-block-image {
       flex-basis: calc(33.33% - (var(--gallery-gap) * 2 / 3));
   }
}

/* Caption Styling */
.wp-block-gallery.has-nested-images figure{
    border-radius: 0.5em;
    overflow: clip;
    box-shadow: var(--shadow-medium);
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
   background: linear-gradient(0deg, rgba(6, 6, 8, 0.1), transparent);
   bottom: 0;
   color: #fff;
   font-size: 12px;
   left: 0;
   margin: 0;
   padding: 2em 1em 1em 1em;
   position: absolute;
   right: 0;
   text-align: center;
   border-radius: 0 0 0.5em 0.5em;
}

@media (max-width: 768px) {
    .wp-block-gallery.has-nested-images {
       gap: var(--gallery-gap, 0.5em)!important;
    }
   .wp-block-gallery.has-nested-images figure.wp-block-image {
       flex-basis: 100%;
       margin-bottom: 0;
   }
}

/* Alignment Options */
.wp-block-gallery.has-nested-images.alignleft,
.wp-block-gallery.has-nested-images.alignright {
   max-width: 420px;
   width: 100%;
}

.wp-block-gallery.has-nested-images.aligncenter {
   justify-content: center;
}

/* Audio */
.wp-block-audio{
    margin: 2em 0;
}

.wp-block-audio audio{
    width: 100%;
    display: block;
}

/* Element Caption */
.wp-element-caption{
    color: var(--surface-40);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: -0.01em;
    margin-top: 1em;
    text-align: left;
}

/* Media Text */
.wp-block-media-text {
    --media-gap: 2em;
   display: grid;
   grid-template-columns: 50% 1fr;
   direction: ltr;
   gap: 0;
   margin: 2em 0;
}

.wp-block-media-text.has-media-on-the-right {
   grid-template-columns: 1fr 50%;
}

.wp-block-media-text__content {
   padding-left: var(--media-gap);
   padding-right: 0;
}

.has-media-on-the-right .wp-block-media-text__content {
   padding-right: var(--media-gap);
   padding-left: 0;
}

[class*="is-vertically-aligned"] > * {
   align-self: var(--v-align, center);
}

.is-vertically-aligned-top > * { --v-align: start; }
.is-vertically-aligned-bottom > * { --v-align: end; }

.wp-block-media-text__media img,
.wp-block-media-text__media video {
   width: 100%;
   height: auto;
}

.is-image-fill-element > .wp-block-media-text__media {
   height: 100%;
   min-height: 250px;
   position: relative;
    border-radius: 0.5em;
    overflow: clip;
    box-shadow: var(--shadow-medium);
}

.is-image-fill-element > .wp-block-media-text__media img {
   position: absolute;
   height: 100%;
   width: 100%;
   object-fit: cover;
}

@media (max-width: 768px) {
    .wp-block-media-text {
    --media-gap: 1em;
    }
   .wp-block-media-text.is-stacked-on-mobile {
       grid-template-columns: 100% !important;
       gap: 2em;
   }

   .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content,
   .has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content {
       padding: 0;
   }
}

/* Video */
.wp-block-video video{
    border-radius: 0.5em;
    overflow: clip;
    box-shadow: var(--shadow-medium);
}

/* Columns */
.wp-block-columns {
    --column-gap: 2em;
   display: flex;
   gap: var(--column-gap, 2em);
   margin: 0 0 1em 0;
}

.wp-block-column {
   flex-grow: 1;
   min-width: 0;
   word-break: break-word;
}

/* Column variations */
.wp-block-columns.has-2-columns .wp-block-column { flex-basis: calc(50% - var(--column-gap)/2); }
.wp-block-columns.has-3-columns .wp-block-column { flex-basis: calc(33.33% - var(--column-gap)*2/3); }
.wp-block-columns.has-4-columns .wp-block-column { flex-basis: calc(25% - var(--column-gap)*3/4); }
.wp-block-columns.has-5-columns .wp-block-column { flex-basis: calc(20% - var(--column-gap)*4/5); }
.wp-block-columns.has-6-columns .wp-block-column { flex-basis: calc(16.66% - var(--column-gap)*5/6); }

/* Default without column count class */
.wp-block-columns:not([class*="has-"]) .wp-block-column {
   flex-basis: calc(50% - var(--column-gap)/2);
}

@media (max-width: 768px) {
   .wp-block-columns {
       --column-gap: 1em;
       flex-direction: column;
   }
   
   .wp-block-column {
       flex-basis: 100% !important;
       margin-left: 0;
   }
}