/* ------------------ */
/* BASE STYLES  */
/* ------------------ */

:host {
    --_column-count---value: 12;
}

/* ------------------ */
/* GRID STYLES  */
/* ------------------ */

.BCyMaASHGTvXMKrBXWvz {
    display: grid;
    grid-template-columns: repeat(var(--_column-count---value), minmax(0,1fr));
    grid-column-gap: var(--site--gutter);
    grid-row-gap: var(--site--gutter);
    overflow: hidden;
    container-type: inline-size;
}

.aHt8rb6Xp_DmKyauSz2A {
    display: flex;
    flex-direction: column;
    justify-content: start;
    justify-items: start;
    align-items: start;    
    grid-column-end: span 1;
    grid-column-gap: var(--_spacing---space--4);
    grid-row-gap: var(--_spacing---space--4);
    z-index: 2;
}

.IuAZo4p_E86zvTI0IgZX {
    grid-column-end: span 11;
    z-index: 0;
    overflow: hidden;
}

.J8OuYu6hsUSZXFQ0nIy9 {
    display: block;
}

.cqBjRp3DUVPGPsJcoOO2 {
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: start;
    justify-items: start;
    align-items: center;
    height: 66vh;
}

.T8zB3R5S0MgACu0Ku5zl {
    display: block;
    flex-shrink: 0;
    height: 100%;
    width: auto!important;
}

.T8zB3R5S0MgACu0Ku5zl div,
.T8zB3R5S0MgACu0Ku5zl img {
    display: block;
    width: auto!important;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
    object-fit: cover;
}

.CTNjjQr1Ouy3_f5vUtrQ,
.xDMMBT_Iwtfsc3a9l6lK {
    display:block;
}

button.P0YlzGUldFfADXXeDrhL {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius--round);
    border: 1px solid var(--_theme---text);
    background-color: var(--_theme---background);
    aspect-ratio: 1 / 1;
    padding: 3px;
    cursor: pointer;
    transition: color 300ms ease, background-color 300ms ease;
}

button.P0YlzGUldFfADXXeDrhL path {
    fill: var(--_theme---text);
    transition: fill 300ms ease;
}

button.P0YlzGUldFfADXXeDrhL:hover {
    background-color: var(--_theme---text);
}

button.P0YlzGUldFfADXXeDrhL:hover path {
    fill: var(--_theme---background);
}

button.P0YlzGUldFfADXXeDrhL:disabled {
    border: 1px solid var(--_theme---text);
    background-color: var(--_theme---background);
    opacity: 0.3;
    cursor: not-allowed;
}

button.P0YlzGUldFfADXXeDrhL:disabled:hover path {
    fill: var(--_theme---text);
}

/* -----------------------------------------------
   Responsive Breakpoints (Desktop-first)
------------------------------------------------ */

/* --- Tablet (≤ 991px) --- */
@media (max-width: 991px) {
    .cqBjRp3DUVPGPsJcoOO2 {
        height: 45cqi;
    }
}

/* --- Mobile Landscape (≤ 767px) --- */
@media (max-width: 767px) {

    .cqBjRp3DUVPGPsJcoOO2 {
        height: 50cqi;
    }

    .BCyMaASHGTvXMKrBXWvz {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .aHt8rb6Xp_DmKyauSz2A {
        display: flex;
        flex-direction: row-reverse;
    }
}

/* --- Mobile Portrait (≤ 478px) --- */
@media (max-width: 478px) {

    .cqBjRp3DUVPGPsJcoOO2 {
        height: 100cqi;
    }
}

/* -----------------------------------------------
   SectionWrapper – Gemeinsame Layout-Styles

   Diese Styles werden von allen Sam-Komponenten
   über den SectionWrapper verwendet.
------------------------------------------------ */

/* ------------------ */
/* Section Variables   */
/* ------------------ */

:host {
  --space-section: var(--space-800);
}

/* ------------------ */
/* Section            */
/* ------------------ */

.Nv1DcW1oQwUDoJIqUjNy {
  padding-block: var(--space-section);
  color: var(--_theme---text);
  background-color: var(--_theme---background);
  width: 100%;      /* Wichtig wegen Homepage */
}

/* ------------------ */
/* Container          */
/* ------------------ */

.YbPq4Lt8jgrgLW4JFcwW {
  display: block;
  position: relative;
  width: 100%;
  width: calc(100% - var(--site--margin) * 2);
  max-width: var(--max-width--main, 90rem);
  margin-inline: auto;
  container-type: inline-size;
}

/* ------------------ */
/* Width Variants     */
/* ------------------ */

.dgtDUAgHHVMbOJOtyy1i {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.So6eYefr1y1ODknjlxun {
  width: 100%;
  width: calc(100% - var(--site--margin) * 2);
  max-width: var(--max-width--main, 90rem);
  margin-inline: auto;
}

.t5zMGS0dcMDkpE6OdZen {
  max-width: inherit;
}

/* ------------------ */
/* Empty State        */
/* ------------------ */

.e3MecLgZI0x6TbiNGvic {
  display: none;
}

/* -----------------------------------------------
   Responsive Breakpoints (Desktop-first)
------------------------------------------------ */

/* --- Tablet (≤ 991px) --- */
@media (max-width: 991px) {
}

/* --- Mobile Landscape (≤ 767px) --- */
@media (max-width: 767px) {
  :host {
    --space-section: var(--space-600);
  }
}

/* --- Mobile Portrait (≤ 478px) --- */
@media (max-width: 478px) {
}
.dbXl2l0n8WmqLDMHZwnQ {
  width: 100%;
  display: block;
}

/* -----------------------------------------------
   Responsive Breakpoints (Desktop-first)
------------------------------------------------ */

/* --- Tablet (≤ 991px) --- */
@media (max-width: 991px) {
}

/* --- Mobile Landscape (≤ 767px) --- */
@media (max-width: 767px) {
}

/* --- Mobile Portrait (≤ 478px) --- */
@media (max-width: 478px) {
}
/* -----------------------------------------------
   Icons – Gemeinsame Grössen-Styles

   var(--_button-style---size--icon-set-size) 
   ist in Webflow hinterlegt
   Alle Icons erben ihre Grösse über .isIconSet.
   Einzelne Komponenten können --icon-set-size lokal
   überschreiben (z.B. Audio-Buttons via Container).
------------------------------------------------ */

.sIkObn96BHKu251A33jn {
  width: var(--_button-style---size--icon-set-size);
  height: var(--_button-style---size--icon-set-size);
  display: block;
  flex-shrink: 0;
}

/* -----------------------------------------------
   Responsive Breakpoints (Desktop-first)
------------------------------------------------ */

/* --- Tablet (≤ 991px) --- */
@media (max-width: 991px) {
}

/* --- Mobile Landscape (≤ 767px) --- */
@media (max-width: 767px) {
}

/* --- Mobile Portrait (≤ 478px) --- */
@media (max-width: 478px) {
}