/* ------------------------------------------------------------
  Variables:
    - Base Color
    - Base Typo
    - Base Space
    - Base Radius
    - Semantic
    - Contextual/Components
-------------------------------------------------------------*/

html:has(.ruckzuck:hover) {
  scroll-padding-top: 0;
}

:is(main.ruckzuck) {
  /* Base Color */
  --brand-1-rgb: 228, 35, 1;
  --brand-1: rgb(var(--brand-1-rgb));
  --brand-1-1: rgba(var(--brand-1-rgb), 0.06);

  --brand-2: #434241;
  --brand-2-alt: #2d2d2d;

  --white: #ffffff;
  --black: #000000;

  --accent-1: #eaf0e0;
  --accent: #6cb50f;
  --accent-6: #548513;

  --star: #ffc107;

  --neutral-1: #f6f6f6;
  --neutral-2: #e5e5e5;
  --neutral-3: #aaaaaa;
  --neutral-9: #1d1f22;

  /* Base Typo */
  --text-2xs: clamp(0.75rem, calc(0vw + 0.75rem), 0.75rem);
  --text-xs: clamp(0.81rem, calc(0.11vw + 0.79rem), 0.88rem);
  --text-s: clamp(0.94rem, calc(0.11vw + 0.91rem), 1rem);
  --text-r: clamp(1rem, calc(0.22vw + 0.95rem), 1.13rem);
  --text-m: clamp(1.06rem, calc(0.33vw + 0.98rem), 1.25rem);
  --text-l: clamp(1.13rem, calc(0.66vw + 0.97rem), 1.5rem);
  --text-xl: clamp(1.25rem, calc(1.32vw + 0.94rem), 2rem);
  --text-2xl: clamp(1.38rem, calc(2.2vw + 0.85rem), 2.63rem);
  --text-3xl: clamp(1.63rem, calc(3.3vw + 0.84rem), 3.5rem);
  --text-4xl: clamp(2rem, calc(4.4vw + 0.96rem), 4.5rem);

  /* Base Spacing */
  --space-0: clamp(0rem, calc(0vw + 0rem), 0rem);
  --space-1: clamp(0.06rem, calc(0vw + 0.06rem), 0.06rem);
  --space-2: clamp(0.13rem, calc(0vw + 0.13rem), 0.13rem);
  --space-3: clamp(0.19rem, calc(0vw + 0.19rem), 0.19rem);
  --space-4: clamp(0.13rem, calc(0.22vw + 0.07rem), 0.25rem);
  --space-6: clamp(0.19rem, calc(0.33vw + 0.11rem), 0.38rem);
  --space-8: clamp(0.25rem, calc(0.44vw + 0.15rem), 0.5rem);
  --space-10: clamp(0.31rem, calc(0.55vw + 0.18rem), 0.63rem);
  --space-12: clamp(0.38rem, calc(0.66vw + 0.22rem), 0.75rem);
  --space-16: clamp(0.5rem, calc(0.88vw + 0.29rem), 1rem);
  --space-20: clamp(0.63rem, calc(1.1vw + 0.36rem), 1.25rem);
  --space-24: clamp(0.75rem, calc(1.32vw + 0.44rem), 1.5rem);
  --space-32: clamp(1rem, calc(1.76vw + 0.58rem), 2rem);
  --space-40: clamp(1.25rem, calc(2.2vw + 0.73rem), 2.5rem);
  --space-48: clamp(1.5rem, calc(2.64vw + 0.87rem), 3rem);
  --space-56: clamp(1.75rem, calc(3.08vw + 1.02rem), 3.5rem);
  --space-64: clamp(2rem, calc(3.52vw + 1.17rem), 4rem);
  --space-80: clamp(2.5rem, calc(4.4vw + 1.46rem), 5rem);
  --space-96: clamp(3rem, calc(5.27vw + 1.75rem), 6rem);
  --space-112: clamp(3.5rem, calc(6.15vw + 2.04rem), 7rem);

  /* Radius */
  --radius-no: clamp(0rem, calc(0vw + 0rem), 0rem);
  --radius-xs: clamp(0.13rem, calc(0.22vw + 0.07rem), 0.25rem);
  --radius-s: clamp(0.38rem, calc(0.22vw + 0.32rem), 0.5rem);
  --radius-m: clamp(0.63rem, calc(0.22vw + 0.57rem), 0.75rem);
  --radius-l: clamp(1rem, calc(0.44vw + 0.9rem), 1.25rem);
  --radius-xl: clamp(1.63rem, calc(0.66vw + 1.47rem), 2rem);
  --radius-full: clamp(62.44rem, calc(0vw + 62.44rem), 62.44rem);

  /* Semantic Gaps */
  --gap-3xs: var(--space-12);
  --gap-2xs: var(--space-16);
  --gap-xs: var(--space-24);
  --gap-s: var(--space-32);
  --gap-m: var(--space-40);
  --gap-l: var(--space-64);
  --gap-xl: var(--space-80);

  /* Semantic Color Vars */
  --c-bg-1: var(--neutral-1);
  --c-bg-2: var(--brand-2-alt);
  --c-bg-3: linear-gradient(to bottom, var(--neutral-1) 70%, var(--white) 30%);
  --c-bg-4: var(--white);
  --c-text-2: var(--neutral-3);

  --c-border-1: var(--neutral-2);
  --c-border-2: var(--neutral-3);
  --c-border-3: var(--brand-2);

  /* Contextual / Components */
  --btn-radius: var(--radius-xs);
  --btn-border: 1px;
  --btn-size-m: var(--space-16) var(--space-20);
  --btn-text-m: var(--text-s);

  /* Icons */
  --icon-time: url("/media/wysiwyg/ui/time.svg");
  --icon-check: url("/media/wysiwyg/ui/check-1.svg");
  --icon-check-2: url("/media/wysiwyg/ui/check-2.svg");

  /* Aspect Ratio */
  --ratio-1-1: 1/1;
  --ratio-2-1: 2/1;
  --ratio-4-3: 4/3;
  --ratio-16-9: 16/9;
  --ratio-3-4: 3/4;
  --ratio-4-5: 4/5;

  /* ------------------------------------------------------------
  Classes:
    - Reset
    - Typo & Lists
    - Media
    - Icons
    - Prose
    - Utils
    - Components
  -------------------------------------------------------------*/

  /* ------------------------------------------
    Reset
  ------------------------------------------ */

  img,
  picture,
  video {
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
  }

  :is(h1, h2, h3, h4, h5, h6) {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    text-wrap: balance;
  }

  :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd) {
    margin: 0;
  }

  strong {
    font-weight: bold;
  }

  /* ------------------------------------------
    Typo & Lists
  ------------------------------------------ */
  :is(h1, h2) span {
    color: var(--brand-1);
  }

  h1,
  .h1 {
    font-size: var(--text-3xl);
    line-height: 1.1;
  }

  h2,
  .h2 {
    font-size: var(--text-2xl);
    line-height: 1.2;
  }

  :is(h3, .h3) {
    font-size: var(--text-l);
    line-height: 1.3;
  }

  h4,
  .h4 {
    font-size: var(--text-m);
    line-height: 1.3;
  }

  h5,
  .h5 {
    font-size: var(--text-m);
    line-height: 1.3;
  }

  h6,
  .h6 {
    font-size: var(--text-r);
    line-height: 1.3;
  }

  p,
  li {
    text-wrap: pretty;
  }

  p {
    font-size: var(--text-r);
    line-height: 1.5;
  }

  :is(ul, ol):not(.glide__slides) {
    padding-left: var(--space-24);
    li + li {
      margin-top: var(--space-12);
    }
  }

  /* ------------------------------------------
    Media
  ------------------------------------------ */
  img {
    border-radius: var(--radius-xs);
  }

  .img--background {
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .img--overlay-1 {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
  }

  /* ------------------------------------------
    Icons
  ------------------------------------------ */

  [class*="icon-"]:not(ul),
  ul[class*="icon-"] li {
    position: relative;
    padding-left: 1.8em;
  }

  ul[class*="icon-"] {
    list-style: none;
    padding-left: 0;
  }

  [class*="icon-"]:not(ul):not(li)::before,
  ul[class*="icon-"] li::before {
    content: "";
    position: absolute;
    left: 0;
    /* top: 0; */
    top: 50%;
    transform: translateY(-50%);
    transform-origin: center center;
    width: 1.3em;
    height: 1.3em;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    background-color: currentColor;
  }

  .icon-check::before,
  ul.icon-check li::before {
    mask-image: var(--icon-check);
    -webkit-mask-image: var(--icon-check);
  }

  .icon-time::before,
  ul.icon-time li::before {
    mask-image: var(--icon-time);
    -webkit-mask-image: var(--icon-time);
  }

  /* ------------------------------------------
    Wysiwyg Elements
  ------------------------------------------ */
  .prose {
    --content-spacing: var(--space-16);

    > * + * {
      margin-top: var(--content-spacing);
    }

    /* Spezifische Abstände für bestimmte Elemente */
    > h2 {
      --content-spacing: var(--space-40);
    }

    > h3 {
      --content-spacing: var(--space-32);
    }

    > :is(h4, h5, h6, p:has(strong)) {
      --content-spacing: var(--space-24);
    }

    /* Listen */
    > ul,
    > ol {
      padding-left: var(--space-32);

      li + li {
        margin-top: var(--space-12);
      }
    }

    /* Eingebettete Elemente */
    > figure {
      --content-spacing: var(--space-40);

      img {
        width: 100%;
        height: auto;
      }

      figcaption {
        margin-top: var(--space-12);
        font-size: var(--text-s);
        color: var(--color-text-muted);
      }
    }
  }

  /* ------------------------------------------
    Utils 
  ------------------------------------------ */

  .overflow-hidden {
    overflow: hidden;
  }

  .relative {
    position: relative;
  }

  @media screen and (max-width: 767px) {
    .order--1-tablet {
      order: -1;
    }
  }

  .pb-0 {
    padding-bottom: 0;
  }

  .py-0 {
    padding-block: 0;
  }

  .py-m {
    padding-block: var(--space-64);
  }

  .py-l {
    padding-block: var(--space-96);
  }

  .py-xl {
    padding-block: var(--space-112);
  }

  .bg-1 {
    background-color: var(--c-bg-1);
  }

  .bg-2 {
    background-color: var(--c-bg-2);
  }

  .bg-3 {
    background: var(--c-bg-3);
  }

  .text-l {
    font-size: var(--text-l);
    line-height: 1.3;
  }

  .text-m {
    font-size: var(--text-m);
    line-height: 1.4;
  }

  .text-s {
    font-size: var(--text-s);
    line-height: 1.5;
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: 1.3;
  }

  .grid-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Clickable Overlay 
    <a class="clickable-overlay"><span class="btn-1">Button<span></a> 
  */

  .clickable-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    display: flex;
    cursor: pointer !important;
  }

  .breakout-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }

  /* ------------------------------------------
    Aspect Ratio 
  ------------------------------------------ */
  [class*="ratio__"] {
    object-fit: cover;
  }

  .ratio__1-1 {
    aspect-ratio: 1/1;
  }

  .ratio__2-1 {
    aspect-ratio: 2/1;
  }

  .ratio__4-5 {
    aspect-ratio: 4/5;
  }

  .ratio__5-6 {
    aspect-ratio: 5/6;
  }

  /* ------------------------------------------
    Components 
  ------------------------------------------ */

  /* Button Group */
  .btn-group {
    display: flex;
    flex-direction: row;
    gap: var(--space-16);
    padding-top: var(--space-16);
  }

  @media screen and (max-width: 480px) {
    .btn-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-16);
      padding-top: var(--space-16);
    }
  }

  /* Button Vars */

  .btn-1 {
    --btn-bg: var(--brand-2-alt);
    --btn-text: var(--white);

    --btn-bg-hover: var(--brand-2);
    --btn-text-hover: var(--white);

    --btn-bg-action: var(--brand-2-alt);
    --btn-text-action: var(--white);
  }

  .btn-2 {
    --btn-bg: var(--white);
    --btn-text: var(--brand-2-alt);

    --btn-bg-hover: var(--brand-2-alt);
    --btn-text-hover: var(--white);

    --btn-bg-action: var(--neutral-2);
    --btn-text-action: var(--brand-2-alt);
  }

  /* Button Styles */
  .btn-1,
  .btn-2 {
    -webkit-font-smoothing: antialiased;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--btn-radius);
    border: var(--btn-border) solid transparent;
    font-weight: 700;
    line-height: 1;
    transition: all 0.2s ease-in-out;
    padding: var(--btn-size-m);
    font-size: var(--btn-text-m);
    &:hover {
      transform: translateY(-0.1rem);
    }
    &:active {
      transform: translateY(0.05rem);
    }
  }

  .btn-1,
  .btn-2 {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    color: var(--btn-text);
    --btn-icon: var(--btn-text);
    &:hover {
      background: var(--btn-bg-hover);
      border-color: var(--btn-bg-hover);
      color: var(--btn-text-hover);
      --btn-icon: var(--btn-text-hover);
    }
    &:active {
      background: var(--btn-bg-action);
      border-color: var(--btn-bg-action);
      color: var(--btn-text-action);
      --btn-icon: var(--btn-text-action);
    }
    &.btn--outline {
      background: transparent;
      border-color: var(--btn-bg);
      color: var(--btn-bg);
      --btn-icon: var(--btn-bg);
      &:hover {
        background: var(--btn-bg);
        border-color: var(--btn-bg);
        color: var(--btn-text);
        --btn-icon: var(--btn-text);
      }
    }
    &.btn--link {
      background: transparent;
      border-color: transparent;
      padding-inline: 0;
      border: none;
      border-radius: 0;
      color: var(--btn-bg);
      --btn-icon: var(--btn-bg);
      &:hover {
        color: var(--btn-bg-hover);
        --btn-icon: var(--btn-bg-hover);
      }
    }
  }

  .clickable-overlay {
    &:hover :is(.btn-1, .btn-2) {
      transform: translateY(-0.1rem);
      background: var(--btn-bg-hover);
    }
    :active :is(.btn-1, .btn-2) {
      transform: translateY(-0.1rem);
      background: var(--btn-bg-hover);
    }
  }

  /* ------------------------------------------------------------
  Classes:
    - Layout
    - Global Content Blocks
    - Global Media Groups
    - Components
-------------------------------------------------------------*/

  /* ------------------------------
    Layout 
  ------------------------------ */
  section {
    padding-block: var(--space-96);
    display: flex;
    flex-direction: column;
  }

  [class*="__container"] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
  }

  [class$="__stack"] {
    background: transparent;
  }

  /* .hero-1 {} */

  .hero-1__container {
    display: grid;
    align-items: initial;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--gap-l);
  }

  @media screen and (max-width: 1023px) {
    .hero-1__container {
      grid-template-columns: 1fr;
    }
  }

  .hero-2 {
    gap: var(--gap-l);
  }

  /* Variante 1 - Höhe passt sich dem Content-Inhalt an */
  .hero-3 {
    padding-block: 0 !important;
    background-color: var(--c-bg-1);
  }

  .hero-3__container {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-40);
  }

  @media (max-width: 768px) {
    .hero-3__container {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 40vh;
      gap: 0 !important;
    }
  }

  .hero-3__stack1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Variante 1 - Höhe passt sich dem Content-Inhalt an */
  .hero-3__stack2 {
    overflow: hidden;
  }

  .hero-3--content-height {
    .hero-3__stack2 {
      height: 0; /* Trick: zwingt die Spalte, nur die Grid-Höhe zu nehmen */
      min-height: 100%;
    }
  }

  .hero-3--fixed-height {
    .hero-3__container {
      height: 50vh;
      overflow: hidden;
    }
  }

  /* 1-Spaltig Flexbox- Stacks/Container untereinander */
  .section-1 {
    gap: var(--gap-l);
  }

  /* 2-Spaltig Grid - Stacks nebeneindander */
  /* .section-2 {} */

  .section-2__container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-l);
  }

  @media screen and (max-width: 767px) {
    .section-2__container {
      grid-template-columns: 1fr;
    }
    .section-2__stack:last-child {
      order: -1;
    }
  }

  /* Section Modifier */
  .section--dark {
    color: var(--neutral-1);
    background-color: var(--c-bg-2);
    a {
      color: var(--neutral-1);
    }
  }

  .section--center,
  .container--center {
    text-align: center;
    > * {
      justify-content: center;
      margin-left: auto;
      margin-right: auto;
    }
    .btn-group {
      justify-content: center;
    }
  }

  .section--relative {
    position: relative;
  }

  .section--bg-img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  /* ------------------------------
    Global Content Blocks 
  ------------------------------ */

  /* Page Header Info Text Block */
  .hero-info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .hero-info__stack {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .hero-info--row {
    flex-direction: row;
  }

  @media screen and (max-width: 767px) {
    .hero-info--row {
      flex-direction: column;
    }
  }

  /* Sections Intro Text Block */
  .section-intro {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    z-index: 1;
  }

  p[class*="eyebrow"] {
    font-weight: 700;
  }

  .section-intro__list[class*="icon-"] li::before {
    background-color: var(--brand-1);
  }

  .section-intro__link {
    font-size: var(--text-l);
    font-weight: 700;
    display: flex;
    gap: var(--space-12);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
    &:hover {
      color: var(--neutral-2);
      .section-intro__link-icon {
        filter: brightness(0) saturate(100%) invert(99%) sepia(3%)
          saturate(756%) hue-rotate(357deg) brightness(114%) contrast(80%);
      }
    }
  }

  .section-intro__link-icon {
    height: 40px;
    width: 40px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(20%)
      hue-rotate(322deg) brightness(105%) contrast(104%);
  }

  /* ------------------------------
    Global Media Blocks 
  ------------------------------ */

  .media-group-1 {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-gap: var(--gap-xs);
  }

  .media-group-1__img1 {
    aspect-ratio: 3/4;
    object-fit: cover;
  }

  @media screen and (max-width: 1023px) {
    .media-group-1__img1 {
      aspect-ratio: 1/1;
      object-fit: cover;
    }
  }

  .store-map {
    .store-map__canvas {
      aspect-ratio: 2/1;
      object-fit: cover;
      border-radius: var(--radius-xs);
    }
  }

  /* ------------------------------
    Components 
  ------------------------------ */

  /* 
    GLide Slider  
  */

  .carousel-1 {
    overflow: hidden;
  }

  .glide__track {
    overflow: visible !important;
  }

  .glide__img {
    aspect-ratio: 4/3;
    object-fit: cover;
  }

  /* 
    Job Styles
  */

  /* Job Accordion */
  .job-accordion__item {
    overflow: hidden;
  }

  .job-accordion__label {
    display: flex;
    gap: var(--space-16);
    align-items: center;
    padding-block: var(--space-20);
    padding-inline: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    user-select: none;
    width: 100%;
    text-align: left;
    height: auto;
    line-height: 1.3;
    border: none;
    outline: none;
    font-size: var(--text-l);
    color: inherit;
    border-radius: 0;
    border-top: 1px solid var(--c-border-1);
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
  }

  .job-accordion__label::after {
    content: "";
    position: absolute;
    right: var(--space-0);
    top: 50%;
    width: 1.5rem;
    height: 1.5rem;
    transform: translateY(-50%);
    transform-origin: center center;
    transition: transform 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .job-accordion__content {
    overflow: hidden;
    transition: height 0.2s ease-out;
    height: 0;
  }

  .job-accordion__details {
    padding: var(--space-20) var(--space-40) var(--space-40);
  }

  .job-accordion__label.is-active::after {
    transform: translateY(-50%) rotate(180deg);
  }

  .job-accordion__label:focus-visible {
    outline: 2px solid var(--brand-2-alt);
    outline-offset: -2px;
  }

  /* Job Fragen */
  .job-fragen {
    background: var(--brand-1-1);
    padding: var(--space-32) var(--space-24);
    display: grid;
    align-items: initial;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-gap: var(--gap-m);
  }

  .job-fragen__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
  }
  .job-fragen__contact {
    border-left: 1px solid var(--c-border-1);
    padding: 0 0 0 var(--space-24);
  }

  @media screen and (max-width: 1023px) {
    .job-fragen {
      grid-template-columns: 1fr;
    }

    .job-fragen__contact {
      border-top: 1px solid var(--c-border-1);
      border-left: none;
      padding: var(--space-24) 0 0 0;
    }
  }

  /* Card-1 - Märkte */

  .card-1-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-64) var(--space-40);
  }

  .card-1 {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--c-border-1);
    position: relative;
    border-radius: var(--radius-xs);
    overflow: hidden;
  }

  .card-1__media {
    overflow: hidden;
  }

  .card-1__img {
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
    transition: transform 0.2s ease-in-out;
  }

  .card-1:hover .card-1__img {
    transform: scale(1.05);
  }

  .card-1__content {
    padding: var(--space-24);
  }

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

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

  /* Card-2 - Markt-Infos */

  .card-2-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-40);
    border-radius: var(--radius-xs);
  }

  .card-2 {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    background-color: var(--c-bg-1);
    padding: var(--space-24);
    border-radius: var(--radius-xs);
  }

  .card-2__list[class*="icon-"] li::before {
    background-color: var(--brand-1);
  }

  .card-2__kicker {
    color: var(--c-text-2);
  }

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

  /* Contact - Person / person-department / Address / address-name / Connect / Hours */
  .contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .contact span {
    line-height: 1.5;
  }
  .contact > * {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .contact__person-name,
  .contact__address-name {
    font-weight: 600;
    font-size: var(--text-r);
  }

  .contact__address-name {
    margin-bottom: 0.5em;
  }

  .contact__address-hours {
    position: relative;
    display: inline-block;
    margin-block: var(--space-4) var(--space-16);
    color: var(--accent);
    font-size: var(--text-xs);
    font-weight: 600;
  }

  /* Anweisungen eigentlich nur sinnvoll bei "click-parent */
  .contact__connect {
    position: relative;
    z-index: 2;
  }

  /* Opening Hours */
  .opening-hours__day-row {
    display: flex;
    flex-direction: row;
    gap: var(--gap-2xs);
    margin-bottom: 0.5em;
    align-items: center;
  }

  .opening-hours__day-row dt {
    width: 6rem;
  }

  .opening-hours--current {
    color: var(--accent);
    font-weight: 600;
  }

  /* -------------------------------
  Testimonial-Komponent
------------------------------- */
  .testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-m);
  }

  .testimonial {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gap-xs);
    border: 1px solid var(--c-border-1);
    padding: var(--space-24);
    border-radius: var(--radius-xs);
  }

  .testimonial__body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .testimonial__footer {
    display: flex;
    font-size: var(--text-xs);
    gap: var(--gap-3xs);
    color: var(--brand-2);
    align-items: center;
  }

  .testimonial__avatar {
    object-fit: cover;
    width: var(--space-48);
    height: var(--space-48);
    border-radius: var(--radius-full);
  }

  .testimonial__name {
    font-weight: bold;
  }

  .testimonial__rating {
    display: flex;
    align-items: center;
  }

  .testimonial__stars {
    display: flex;
    gap: 0.188rem;
  }

  .testimonial__star {
    font-size: var(--text-s);
    color: #e0e0e0;
  }

  .testimonial__star.full {
    color: var(--star);
  }

  .testimonial__star.half {
    position: relative;
  }

  .testimonial__star.half::after {
    content: "★";
    color: var(--star);
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    overflow: hidden;
  }

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

  /* -------------------------------
  Feature-Card-1 
------------------------------- */
  /*  Light (Default) */
  .feature-cards-1 {
    --text-color: black;
    --border-color: var(--c-border-3);
    --icon-color: brightness(0) saturate(100%) invert(18%) sepia(46%)
      saturate(7499%) hue-rotate(13deg) brightness(97%) contrast(104%);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-s);
  }

  /* Dark */
  .bg-2 .feature-cards-1 {
    --text-color: white;
    --border-color: white;
    /* filter: brightness(0) saturate(100%) invert(18%) sepia(46%) saturate(7499%) hue-rotate(13deg) brightness(97%) contrast(104%); */
    --icon-color: brightness(0) saturate(100%) invert(100%) sepia(0%)
      saturate(20%) hue-rotate(322deg) brightness(105%) contrast(104%);
  }

  @media screen and (max-width: 920px) {
    .feature-cards-1 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 480px) {
    .feature-cards-1 {
      grid-template-columns: repeat(1, 1fr);
    }
  }

  .feature-card-1 {
    display: flex;
    flex-direction: column;
    color: var(--text-color);
    gap: var(--gap-xs);
    border: 1px solid var(--border-color);
    padding: var(--space-32) var(--space-24);
  }

  .feature-card-1__heading {
    font-size: var(--text-m) !important;
    text-wrap: nowrap;
  }

  .feature-card-1__text {
    font-size: var(--text-s) !important;
  }

  .feature-card-1__icon {
    height: 32px;
    width: 32px;
    filter: var(--icon-color);
  }

  /* Image Slider */

  .slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--c-bg-1);
    box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.15),
      16px 16px 0 0 rgba(0, 0, 0, 0.1);
  }

  @media (max-width: 768px) {
    .slider {
      aspect-ratio: 4/3;
      min-height: unset;
    }
  }

  .slider img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }

  .slider img.active {
    opacity: 1;
  }
} /* Ruckzuck End */