/** Shopify CDN: Minification failed

Line 835:3 Unexpected "{"
Line 835:4 Expected identifier but found "%"
Line 837:48 Expected identifier but found whitespace
Line 838:2 Unexpected "-"
Line 845:1 Expected identifier but found "%"
Line 847:0 Unexpected "<"
Line 850:9 Unterminated string token
Line 851:14 Expected identifier but found "%"
Line 851:56 Unexpected "var("
Line 851:79 Expected identifier but found "%"
... and 428 more hidden warnings

**/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Nunito:wght@400;500;600;700&display=swap');

/* ==========================================================================
   ORIGIN COFFEE STORIES – CENTRAL DESIGN SYSTEM
   Single visual source of truth for the redesigned Shopify theme.
   Standard content width: 1400px
   ========================================================================== */

:root {
  /* Core palette */
  --ocs-bg: #fbfff7;
  --ocs-surface: #ffffff;
  --ocs-primary: #467a3a;
  --ocs-primary-hover: #5e9f4f;
  --ocs-text: #30240a;
  --ocs-text-light: #5a5143;
  --ocs-border: #e4d9c3;

  /* Derived component colors */
  --ocs-header-bg: #30240a;
  --ocs-header-text: #f8f6e9;
  --ocs-announcement-bg: #eadcc5;
  --ocs-announcement-text: #0d1512;
  --ocs-header-height: 82px;
  --ocs-announcement-height: 40px;
  --ocs-footer-bg: var(--ocs-text);
  --ocs-footer-text: var(--ocs-bg);
  --ocs-link: var(--ocs-primary);
  --ocs-link-hover: var(--ocs-primary-hover);
  --ocs-focus: var(--ocs-primary);
  --ocs-input-bg: var(--ocs-surface);
  --ocs-card-bg: var(--ocs-surface);
  --ocs-badge-bg: var(--ocs-bg);

  /* Layout */
  --ocs-content-width: 1400px;
  --ocs-page-padding: 36px;
  --ocs-page-padding-mobile: 20px;

  /* Spacing scale */
  --ocs-space-1: 4px;
  --ocs-space-2: 8px;
  --ocs-space-3: 12px;
  --ocs-space-4: 16px;
  --ocs-space-5: 20px;
  --ocs-space-6: 24px;
  --ocs-space-8: 32px;
  --ocs-space-10: 40px;
  --ocs-space-12: 48px;
  --ocs-space-16: 64px;
  --ocs-space-20: 80px;
  --ocs-space-24: 96px;

  /* Typography families */
  --ocs-font-display: "Nunito", sans-serif;
  --ocs-font-heading: "Cormorant Garamond", serif;
  --ocs-font-card-heading: "Nunito", sans-serif;
  --ocs-font-small-heading: "Nunito", sans-serif;
  --ocs-font-kicker: "Nunito", sans-serif;
  --ocs-font-body: "Nunito", sans-serif;
  --ocs-font-body-small: "Nunito", sans-serif;
  --ocs-font-label: "Nunito", sans-serif;
  --ocs-font-label-small: "Nunito", sans-serif;
  --ocs-font-caption: "Nunito", sans-serif;
  --ocs-font-button: "Nunito", sans-serif;
  --ocs-font-price: "Nunito", sans-serif;
  --ocs-font-icon-text: "Nunito", sans-serif;
  --ocs-font-icon-text-small: "Nunito", sans-serif;
  --ocs-font-ui: "Nunito", sans-serif;
  --ocs-font-accent: var(--font-accent-family, "Nunito", sans-serif);

  /* Desktop type scale */
  --ocs-type-display: 50px;
  --ocs-type-h1: 37px;
  --ocs-type-h2: 34px;
  --ocs-type-h3: 20px;
  --ocs-type-h4: 17px;
  --ocs-type-lead: 15px;
  --ocs-type-body: 14px;
  --ocs-type-body-small: 12px;
  --ocs-type-label: 12px;
  --ocs-type-label-small: 11px;
  --ocs-type-caption: 11px;
  --ocs-type-button: 14px;
  --ocs-type-price: 20px;
  --ocs-type-icon-text: 11px;
  --ocs-type-icon-text-small: 10px;
  --ocs-type-announcement: 12px;

  /* Kicker */
  --ocs-type-kicker: 13px;
  --ocs-type-kicker-mobile: 11px;
  --ocs-weight-kicker: 500;
  --ocs-line-kicker: 1.2;
  --ocs-tracking-kicker: 0.08em;
  --ocs-transform-kicker: uppercase;

  /* Semantic sizes */
  --ocs-role-hero-size: var(--ocs-type-display);
  --ocs-role-section-heading-size: var(--ocs-type-h2);
  --ocs-role-card-heading-size: var(--ocs-type-h3);
  --ocs-role-small-heading-size: var(--ocs-type-h4);
  --ocs-role-lead-size: var(--ocs-type-lead);
  --ocs-role-body-size: var(--ocs-type-body);
  --ocs-role-body-small-size: var(--ocs-type-body-small);
  --ocs-role-label-size: var(--ocs-type-label);
  --ocs-role-label-small-size: var(--ocs-type-label-small);
  --ocs-role-caption-size: var(--ocs-type-caption);
  --ocs-role-button-size: var(--ocs-type-button);
  --ocs-role-price-size: var(--ocs-type-price);
  --ocs-role-icon-text-size: var(--ocs-type-icon-text);
  --ocs-role-icon-text-small-size: var(--ocs-type-icon-text-small);

  /* Type styles */
  --ocs-weight-display: 600;
  --ocs-line-display: 1.04;
  --ocs-tracking-display: -0.025em;

  --ocs-weight-h1: 600;
  --ocs-line-h1: 1.08;
  --ocs-tracking-h1: -0.02em;

  --ocs-weight-h2: 600;
  --ocs-line-h2: 1.14;
  --ocs-tracking-h2: -0.015em;

  --ocs-weight-h3: 600;
  --ocs-line-h3: 1.2;
  --ocs-tracking-h3: -0.01em;

  --ocs-weight-h4: 600;
  --ocs-line-h4: 1.25;
  --ocs-tracking-h4: 0;

  --ocs-weight-lead: 400;
  --ocs-line-lead: 1.55;
  --ocs-tracking-lead: 0;

  --ocs-weight-body: 400;
  --ocs-line-body: 1.65;
  --ocs-tracking-body: 0;

  --ocs-weight-body-small: 400;
  --ocs-line-body-small: 1.55;
  --ocs-tracking-body-small: 0;

  --ocs-weight-label: 600;
  --ocs-line-label: 1.3;
  --ocs-tracking-label: 0.06em;

  --ocs-weight-label-small: 600;
  --ocs-line-label-small: 1.3;
  --ocs-tracking-label-small: 0.06em;

  --ocs-weight-caption: 400;
  --ocs-line-caption: 1.45;
  --ocs-tracking-caption: 0.01em;

  --ocs-weight-button: 500;
  --ocs-line-button: 1.2;
  --ocs-tracking-button: 0.01em;

  --ocs-weight-price: 600;
  --ocs-line-price: 1.1;
  --ocs-tracking-price: -0.01em;

  --ocs-weight-icon-text: 500;
  --ocs-line-icon-text: 1.35;
  --ocs-tracking-icon-text: 0;

  --ocs-weight-icon-text-small: 500;
  --ocs-line-icon-text-small: 1.35;
  --ocs-tracking-icon-text-small: 0;

  /* Components */
  --ocs-button-height: 48px;
  --ocs-button-radius: 0px;
  --ocs-card-radius: 0px;
  --ocs-input-radius: 0px;
  --ocs-border-width: 1px;

  /* Bridge to Shopify theme typography */
  --font-body-family: var(--ocs-font-body);
  --font-heading-family: var(--ocs-font-heading);

  /* Bridge to Shopify button radius */
  --buttons-radius: var(--ocs-button-radius);
  --buttons-radius-outset: var(--ocs-button-radius);
  --buttons-border-offset: 0px;
}

@media screen and (max-width: 749px) {
  :root {
    --ocs-type-display-mobile: 32px;
    --ocs-type-h1-mobile: 32px;
    --ocs-type-h2-mobile: 24px;
    --ocs-type-h3-mobile: 17px;
    --ocs-type-h4-mobile: 18px;
    --ocs-type-lead-mobile: 14px;
    --ocs-type-body-mobile: 13px;
    --ocs-type-body-small-mobile: 12px;
    --ocs-type-label-mobile: 11px;
    --ocs-type-label-small-mobile: 10px;
    --ocs-type-caption-mobile: 10px;
    --ocs-type-button-mobile: 12px;
    --ocs-type-price-mobile: 16px;
    --ocs-type-icon-text-mobile: 10px;
    --ocs-type-icon-text-small-mobile: 9px;
    --ocs-type-announcement-mobile: 10px;

    --ocs-button-height: 39px;

    --ocs-role-hero-size: var(--ocs-type-display-mobile);
    --ocs-role-section-heading-size: var(--ocs-type-h2-mobile);
    --ocs-role-card-heading-size: var(--ocs-type-h3-mobile);
    --ocs-role-small-heading-size: var(--ocs-type-h4-mobile);
    --ocs-role-lead-size: var(--ocs-type-lead-mobile);
    --ocs-role-body-size: var(--ocs-type-body-mobile);
    --ocs-role-body-small-size: var(--ocs-type-body-small-mobile);
    --ocs-role-label-size: var(--ocs-type-label-mobile);
    --ocs-role-label-small-size: var(--ocs-type-label-small-mobile);
    --ocs-role-caption-size: var(--ocs-type-caption-mobile);
    --ocs-role-button-size: var(--ocs-type-button-mobile);
    --ocs-role-price-size: var(--ocs-type-price-mobile);
    --ocs-role-icon-text-size: var(--ocs-type-icon-text-mobile);
    --ocs-role-icon-text-small-size: var(--ocs-type-icon-text-small-mobile);
  }
}

/* ==========================================================================
   BASE DOCUMENT
   ========================================================================== */

html {
  color: var(--ocs-text);
  background: var(--ocs-bg);
}

body {
  font-family: var(--ocs-font-body);
  font-size: var(--ocs-type-body);
  font-weight: var(--ocs-weight-body);
  line-height: var(--ocs-line-body);
  letter-spacing: var(--ocs-tracking-body);
  color: var(--ocs-text);
  background: var(--ocs-bg);
}

.page-width,
.ocs-page-width,
.ocs-container {
  width: 100%;
  max-width: var(--ocs-content-width);
  margin-inline: auto;
  padding-left: var(--ocs-page-padding);
  padding-right: var(--ocs-page-padding);
}

@media screen and (max-width: 749px) {
  .page-width,
  .ocs-page-width,
  .ocs-container {
    padding-left: var(--ocs-page-padding-mobile);
    padding-right: var(--ocs-page-padding-mobile);
  }
}

/* ==========================================================================
   TYPOGRAPHY – GLOBAL ROLES
   ========================================================================== */

h1, .h1, .ocs-h1 {
  font-family: var(--ocs-font-heading);
  font-size: var(--ocs-type-h1);
  font-weight: var(--ocs-weight-h1);
  line-height: var(--ocs-line-h1);
  letter-spacing: var(--ocs-tracking-h1);
  color: var(--ocs-text);
  text-transform: none;
}

h2, .h2, .ocs-h2, .ocs-section-heading {
  font-family: var(--ocs-font-heading);
  font-size: var(--ocs-type-h2);
  font-weight: var(--ocs-weight-h2);
  line-height: var(--ocs-line-h2);
  letter-spacing: var(--ocs-tracking-h2);
  color: var(--ocs-text);
  text-transform: none;
}

h3, .h3 {
  font-family: var(--ocs-font-card-heading);
  font-size: var(--ocs-type-h3);
  font-weight: var(--ocs-weight-h3);
  line-height: var(--ocs-line-h3);
  letter-spacing: var(--ocs-tracking-h3);
  color: var(--ocs-text);
  text-transform: none;
}

h4, .h4, h5, .h5, h6, .h6, .ocs-small-heading {
  font-family: var(--ocs-font-small-heading);
  font-size: var(--ocs-type-h4);
  font-weight: var(--ocs-weight-h4);
  line-height: var(--ocs-line-h4);
  letter-spacing: var(--ocs-tracking-h4);
  color: var(--ocs-text);
  text-transform: none;
}

.ocs-display,
.ocs-hero-heading {
  font-family: var(--ocs-font-heading);
  font-size: var(--ocs-type-display);
  font-weight: var(--ocs-weight-display);
  line-height: var(--ocs-line-display);
  letter-spacing: var(--ocs-tracking-display);
  color: var(--ocs-text);
}

.ocs-card-heading {
  font-family: var(--ocs-font-card-heading);
  font-size: var(--ocs-type-h3);
  font-weight: var(--ocs-weight-h3);
  line-height: var(--ocs-line-h3);
  letter-spacing: var(--ocs-tracking-h3);
  color: var(--ocs-text);
}

p,
.rte,
.ocs-body {
  font-family: var(--ocs-font-body);
  font-size: var(--ocs-type-body);
  font-weight: var(--ocs-weight-body);
  line-height: var(--ocs-line-body);
  letter-spacing: var(--ocs-tracking-body);
  color: var(--ocs-text-light);
}

.ocs-lead {
  font-family: var(--ocs-font-body);
  font-size: var(--ocs-type-lead);
  font-weight: var(--ocs-weight-lead);
  line-height: var(--ocs-line-lead);
  letter-spacing: var(--ocs-tracking-lead);
  color: var(--ocs-text-light);
}

.ocs-body-small {
  font-family: var(--ocs-font-body-small);
  font-size: var(--ocs-type-body-small);
  font-weight: var(--ocs-weight-body-small);
  line-height: var(--ocs-line-body-small);
  letter-spacing: var(--ocs-tracking-body-small);
  color: var(--ocs-text-light);
}

.ocs-kicker {
  font-family: var(--ocs-font-kicker);
  font-size: var(--ocs-type-kicker);
  font-weight: var(--ocs-weight-kicker);
  line-height: var(--ocs-line-kicker);
  letter-spacing: var(--ocs-tracking-kicker);
  text-transform: var(--ocs-transform-kicker);
  color: var(--ocs-primary);
}

.ocs-label,
.form__label,
.field__label {
  font-family: var(--ocs-font-label);
  font-size: var(--ocs-type-label);
  font-weight: var(--ocs-weight-label);
  line-height: var(--ocs-line-label);
  letter-spacing: var(--ocs-tracking-label);
  color: var(--ocs-text);
}

.ocs-label-small {
  font-family: var(--ocs-font-label-small);
  font-size: var(--ocs-type-label-small);
  font-weight: var(--ocs-weight-label-small);
  line-height: var(--ocs-line-label-small);
  letter-spacing: var(--ocs-tracking-label-small);
  color: var(--ocs-text);
}

.ocs-caption,
.caption,
.caption-with-letter-spacing {
  font-family: var(--ocs-font-caption);
  font-size: var(--ocs-type-caption);
  font-weight: var(--ocs-weight-caption);
  line-height: var(--ocs-line-caption);
  letter-spacing: var(--ocs-tracking-caption);
  color: var(--ocs-text-light);
}

.price,
.price-item,
.ocs-price {
  font-family: var(--ocs-font-price);
  font-size: var(--ocs-role-price-size);
  font-weight: var(--ocs-weight-price);
  line-height: var(--ocs-line-price);
  letter-spacing: var(--ocs-tracking-price);
  color: var(--ocs-text);
}

@media screen and (max-width: 749px) {
  h1, .h1, .ocs-h1 {
    font-size: var(--ocs-type-h1-mobile);
  }

  .ocs-kicker {
    font-size: var(--ocs-type-kicker-mobile);
  }
}

/* ==========================================================================
   LINKS
   ========================================================================== */

a {
  color: var(--ocs-link);
  text-decoration-color: currentColor;
}

a:hover {
  color: var(--ocs-link-hover);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded,
.shopify-payment-button [role="button"],
.cart__dynamic-checkout-buttons [role="button"],
.newsletter-form__button,
.ocs-button,
.ocs-editorial-banner__button,
.ocs-add-button {
  min-height: var(--ocs-button-height);
  border-radius: var(--ocs-button-radius) !important;
  font-family: var(--ocs-font-button);
  font-size: var(--ocs-role-button-size);
  font-weight: var(--ocs-weight-button);
  line-height: var(--ocs-line-button);
  letter-spacing: var(--ocs-tracking-button);
  text-transform: none;
}

.button::before,
.button::after,
.shopify-challenge__button::before,
.shopify-challenge__button::after,
.customer button::before,
.customer button::after,
.shopify-payment-button__button--unbranded::before,
.shopify-payment-button__button--unbranded::after,
.shopify-payment-button [role="button"]::before,
.cart__dynamic-checkout-buttons [role="button"]::before {
  border-radius: var(--ocs-button-radius) !important;
}

.button--primary,
.ocs-button--primary,
.shopify-challenge__button,
.customer button {
  background: var(--ocs-primary);
  color: var(--ocs-bg);
  border: var(--ocs-border-width) solid var(--ocs-primary);
}

.button--primary:hover,
.ocs-button--primary:hover,
.customer button:hover {
  background: var(--ocs-primary-hover);
  border-color: var(--ocs-primary-hover);
  color: var(--ocs-bg);
}

.button--secondary,
.ocs-button--secondary {
  background: transparent;
  color: var(--ocs-text);
  border: var(--ocs-border-width) solid var(--ocs-text);
}

.button--secondary:hover,
.ocs-button--secondary:hover {
  color: var(--ocs-primary);
  border-color: var(--ocs-primary);
}

/* ==========================================================================
   FORMS
   ========================================================================== */

input,
textarea,
select,
.field__input,
.select__select,
.customer .field input,
.customer .select select {
  font-family: var(--ocs-font-ui);
  font-size: var(--ocs-type-body);
  color: var(--ocs-text);
  background: var(--ocs-input-bg);
  border: var(--ocs-border-width) solid var(--ocs-border);
  border-radius: var(--ocs-input-radius);
}

input::placeholder,
textarea::placeholder {
  color: var(--ocs-text-light);
  opacity: .75;
}

input:focus,
textarea:focus,
select:focus,
.field__input:focus,
.select__select:focus {
  outline: 1px solid var(--ocs-focus);
  outline-offset: 1px;
  border-color: var(--ocs-focus);
  box-shadow: none;
}

/* ==========================================================================
   CARDS / SURFACES / BADGES
   ========================================================================== */

.card,
.multicolumn-card,
.ocs-card {
  background: var(--ocs-card-bg);
  border-color: var(--ocs-border);
  border-radius: var(--ocs-card-radius);
  color: var(--ocs-text);
}

.badge,
.ocs-badge {
  font-family: var(--ocs-font-label-small);
  font-size: var(--ocs-type-label-small);
  font-weight: var(--ocs-weight-label-small);
  line-height: var(--ocs-line-label-small);
  letter-spacing: var(--ocs-tracking-label-small);
  color: var(--ocs-primary);
  background: var(--ocs-badge-bg);
  border: var(--ocs-border-width) solid var(--ocs-primary);
  border-radius: 999px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  background: var(--ocs-footer-bg);
  color: var(--ocs-footer-text);
}

.footer,
.footer p,
.footer a,
.footer .list-menu__item--link,
.footer .copyright__content {
  font-family: var(--ocs-font-ui);
  color: var(--ocs-footer-text);
}

.footer a:hover {
  color: var(--ocs-footer-text);
  opacity: .8;
}

/* ==========================================================================
   PRODUCT / CART / ACCORDION – VISUAL BASE
   ========================================================================== */

.product__title h1,
.product__title .h1 {
  color: var(--ocs-text);
  font-family: var(--ocs-font-heading);
}

.product__description,
.product__description p,
.product__description li {
  color: var(--ocs-text-light);
  font-family: var(--ocs-font-body);
}

.cart-item__name,
.cart-item__name a {
  font-family: var(--ocs-font-card-heading);
  color: var(--ocs-text);
}

.accordion,
.collapsible-content {
  color: var(--ocs-text);
}

.accordion__title,
.collapsible-content__heading {
  font-family: var(--ocs-font-heading);
  color: var(--ocs-text);
}

.accordion__content,
.accordion__content p {
  font-family: var(--ocs-font-body);
  color: var(--ocs-text-light);
}

/* ==========================================================================
   OCS SECTION SAFETY LAYER
   Prevent old theme rules from leaking legacy colors/fonts into new OCS sections.
   ========================================================================== */

.ocs-section {
  color: var(--ocs-text);
  font-family: var(--ocs-font-body);
}

.ocs-section h1,
.ocs-section h2 {
  font-family: var(--ocs-font-heading);
  color: var(--ocs-text);
}

.ocs-section h3,
.ocs-section h4,
.ocs-section h5,
.ocs-section h6 {
  color: var(--ocs-text);
}

.ocs-section p,
.ocs-section li {
  color: var(--ocs-text-light);
}

.ocs-section .ocs-kicker,
.ocs-section .ocs-label--accent {
  color: var(--ocs-primary);
}

/* ==========================================================================
   OCS HEADER – übernommen aus dem bisherigen Custom-CSS
   Struktur und Darstellung des bestehenden Shopify-Headers wurden gezielt
   aus den alten CSS-Dateien extrahiert. Keine neue Header-Section nötig.
   ========================================================================== */

.announcement-bar__message {
  font-family: var(--ocs-font-ui, "Nunito", sans-serif);
  font-weight: 500;
  line-height:30px;
  color: #173845;
  letter-spacing: 1px!important;
  min-height: auto;
  padding: 1px 0 !important;
}

.header:not(.drawer-menu).page-width {
  padding-left: 6rem;
  padding-right: 6rem;
}

.header-wrapper .header {
  grid-template-columns: 3fr auto auto;
  padding-top: 21px !important;
  padding-bottom: 21px !important;
}

.header .header__menu-item,
.header .header__icon--account{
    font-family: var(--ocs-font-ui, "Nunito", sans-serif);
    color: #FFFCEE;
    font-size: 16px;
    line-height: 21.09px;
    font-weight: 400;
    padding: 0 55.49px 0 0;
    letter-spacing: 0;
}

.header__icon--cart .cartCount {
    margin-left: 12px;
    margin-right: 5px;
    font-size: 16px;
    line-height: 21.09px;
    font-weight: 400;
}

.header__icon--cart .cartNumber{
      font-size: 18px;
    line-height: 21.09px;
    font-weight: 400;
}

.header .header__icon--account,
.header .header__icon--cart{text-decoration:none;}

.header .header__heading-link {
    padding: 0;
}

.header__submenu.list-menu{
  padding: 1rem 1rem;
}

.header .header__menu-item{
  margin-bottom: 10px;
}

.header__submenu .header__menu-item {
    margin-right: 0;
    margin-left: 0;
}

.list-menu--inline > li > .header__menu-item,
.list-menu--inline > li > header-menu > details > summary {
  margin-bottom: 0 !important;
}

@media screen and (max-width: 1199px) {
.header-wrapper .header{padding:21px 40px !important;}
}

@media screen and (max-width: 989px) {
.header-wrapper .header{padding:16.5px 20px !important;grid-template-columns: auto max-content max-content;}

.header .header__icons {margin-right: 51px;}

.header .header__heading,
  .header .header__heading-link{width:100%;text-align:left;}

.header .header__icon--account{display: none;}

.header .header__menu-item, .header .header__icon--account{padding-right:24px;}

.header__icon--cart .cartCount{display:none;}

.header__icon--cart .cartNumber{margin-left:15px;}
}

@media screen and (max-width: 749px) {
.announcement-bar__message{letter-spacing: 0.4px !important;}
}

@media screen and (max-width: 390px) {
.announcement-bar__message{line-height: normal;padding: 4.5px 0!important;}

.header .header__icons {margin-right: 35px;}
}

.announcement-bar__message{
    margin-bottom: 0 !important;
}

@media screen and (max-width: 749px) {
.collapsible-content__header{text-align: center !important;}
}

/* ==========================================================================
   ANNOUNCEMENT BAR
   Visual styling comes from the OCS design system.
   Shopify base.css continues to provide slider/layout functionality.
   ========================================================================== */

.ocs-announcement-bar {
  font-family: var(--ocs-font-ui);
}

.ocs-announcement-bar .announcement-bar,
.ocs-announcement-bar .announcement-bar__announcement,
.ocs-announcement-bar .announcement-bar__link,
.ocs-announcement-bar .announcement-bar__message {
  color: #000000;
}

.ocs-announcement-bar .ocs-announcement-message {
  margin: 0;
  padding: 8px 0;
  min-height: 0;

  font-family: var(--ocs-font-label);
  font-size: var(--ocs-type-announcement);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ocs-announcement-bar .announcement-bar__link {
  text-decoration: none;
}

.ocs-announcement-bar .announcement-bar__link:hover {
  color: inherit;
  opacity: .8;
}

@media screen and (max-width: 749px) {
  .ocs-announcement-bar .ocs-announcement-message {
    padding: 7px 0;
    font-size: var(--ocs-type-announcement-mobile);
    letter-spacing: 0.06em;
  }{% comment %}
  Origin Coffee Stories – Immersive Slide Flow
  Horizontaler, überlappender Story-Slider mit:
  - 4+ großen Slide-Cards
  - sichtbaren Nachbar-Slides
  - aktiver Karte größer als die Nachbarn
  - editorialer Typografie
  - dezenter Progress-Navigation
  - optionalem Button, Kicker, Text
  - Desktop & Mobile separat einstellbar
{% endcomment %}

<section
  id="OcsImmersiveFlow-{{ section.id }}"
  class="ocs-immersive-flow"
  style="
    --if-bg: {% if section.settings.use_design_system %}var(--ocs-bg, #f8f6e9){% else %}{{ section.settings.background_color }}{% endif %};
    --if-text: {% if section.settings.use_design_system %}var(--ocs-text, #30240a){% else %}{{ section.settings.text_color }}{% endif %};
    --if-muted: {% if section.settings.use_design_system %}var(--ocs-text-light, #5a5143){% else %}{{ section.settings.muted_color }}{% endif %};
    --if-accent: {% if section.settings.use_design_system %}var(--ocs-primary, #467a3a){% else %}{{ section.settings.accent_color }}{% endif %};
    --if-border: {% if section.settings.use_design_system %}var(--ocs-border, #e4d9c3){% else %}{{ section.settings.border_color }}{% endif %};
    --if-panel-bg: {{ section.settings.text_panel_color }};
    --if-panel-opacity: {{ section.settings.text_panel_opacity | divided_by: 100.0 }};
    --if-panel-opacity-mobile: {{ section.settings.text_panel_opacity_mobile | divided_by: 100.0 }};

    --if-heading-size: var(--ocs-type-{{ section.settings.heading_role }}, 36px);

    {% if section.settings.slide_heading_role_desktop == 'custom' %}
      --if-slide-heading-size: {{ section.settings.slide_heading_size }}px;
    {% else %}
      --if-slide-heading-size: var(--ocs-type-{{ section.settings.slide_heading_role_desktop }}, {{ section.settings.slide_heading_size }}px);
    {% endif %}

    --if-slide-text-size: var(--ocs-type-{{ section.settings.slide_text_role }}, 14px);
    --if-slide-kicker-size: var(--ocs-type-{{ section.settings.slide_kicker_role }}, 14px);
    --if-slide-button-size: var(--ocs-type-{{ section.settings.slide_button_role }}, 12px);
    --if-count-size: var(--ocs-type-{{ section.settings.count_role }}, 11px);
  "
>
  <div class="ocs-immersive-flow__inner">

    {% if section.settings.kicker != blank or section.settings.heading != blank %}
      <div class="ocs-immersive-flow__intro">
        {% if section.settings.kicker != blank %}
          <div class="ocs-immersive-flow__kicker">{{ section.settings.kicker }}</div>
        {% endif %}
        {% if section.settings.heading != blank %}
          <div class="ocs-immersive-flow__heading">{{ section.settings.heading }}</div>
        {% endif %}
      </div>
    {% endif %}

    <div class="ocs-immersive-flow__shell">
      <button
        type="button"
        class="ocs-immersive-flow__arrow ocs-immersive-flow__arrow--prev"
        data-immersive-prev
        aria-label="Vorheriger Slide"
      >←</button>

      <div class="ocs-immersive-flow__viewport" data-immersive-viewport>
        <div class="ocs-immersive-flow__track" data-immersive-track>
          {% for block in section.blocks %}
            {% if block.type == 'slide' %}
              <article
                class="ocs-immersive-flow__slide"
                data-immersive-slide
                {{ block.shopify_attributes }}
                style="
                  --slide-text: {{ block.settings.text_color }};
                  --slide-accent: {{ block.settings.accent_color }};
                "
              >
                <div class="ocs-immersive-flow__media">
                  {% if block.settings.image != blank %}
                    <picture>
                      {% if block.settings.image_mobile != blank %}
                        <source media="(max-width: 749px)" srcset="{{ block.settings.image_mobile | image_url: width: 700 }} 700w, {{ block.settings.image_mobile | image_url: width: 1000 }} 1000w, {{ block.settings.image_mobile | image_url: width: 1400 }} 1400w" sizes="86vw">
                      {% endif %}
                      {{
                        block.settings.image
                        | image_url: width: 2200
                        | image_tag:
                          loading: 'lazy',
                          class: 'ocs-immersive-flow__image',
                          widths: '700, 1000, 1400, 1800, 2200',
                          sizes: '(max-width: 749px) 86vw, 58vw',
                          alt: block.settings.image.alt
                      }}
                    </picture>
                  {% else %}
                    {{ 'lifestyle-1' | placeholder_svg_tag: 'ocs-immersive-flow__placeholder' }}
                  {% endif %}
                </div>

                <div class="ocs-immersive-flow__content">
                  <div class="ocs-immersive-flow__count">
                    {{ forloop.index | prepend: '0' | slice: -2, 2 }}
                    <span>/</span>
                    {{ section.blocks.size | prepend: '0' | slice: -2, 2 }}
                  </div>

                  {% if block.settings.kicker != blank %}
                    <div class="ocs-immersive-flow__slide-kicker">{{ block.settings.kicker }}</div>
                  {% endif %}

                  {% if block.settings.heading != blank %}
                    <div class="ocs-immersive-flow__slide-heading">{{ block.settings.heading }}</div>
                  {% endif %}

                  {% if block.settings.text != blank %}
                    <div class="ocs-immersive-flow__slide-text rte">{{ block.settings.text }}</div>
                  {% endif %}

                  {% if block.settings.button_label != blank and block.settings.button_link != blank %}
                    <a class="ocs-immersive-flow__button" href="{{ block.settings.button_link }}">
                      <span>{{ block.settings.button_label }}</span>
                      <span aria-hidden="true">→</span>
                    </a>
                  {% endif %}
                </div>
              </article>
            {% endif %}
          {% endfor %}
        </div>
      </div>

      <button
        type="button"
        class="ocs-immersive-flow__arrow ocs-immersive-flow__arrow--next"
        data-immersive-next
        aria-label="Nächster Slide"
      >→</button>
    </div>

    <div class="ocs-immersive-flow__footer">
      <div class="ocs-immersive-flow__progress">
        <span class="ocs-immersive-flow__progress-fill" data-immersive-progress></span>
      </div>
      <div class="ocs-immersive-flow__footer-count">
        <span data-immersive-current>01</span>
        <span class="ocs-immersive-flow__footer-sep">/</span>
        <span data-immersive-total>04</span>
      </div>
    </div>

  </div>
</section>

<style>
  #OcsImmersiveFlow-{{ section.id }} {
    width: 100%;
    margin-top: {{ section.settings.margin_top }}px;
    margin-bottom: {{ section.settings.margin_bottom }}px;
    background: var(--if-bg);
    color: var(--if-text);
    overflow: hidden;
    font-family: var(--ocs-font-body, "Nunito", sans-serif);
  }

  #OcsImmersiveFlow-{{ section.id }},
  #OcsImmersiveFlow-{{ section.id }} * {
    box-sizing: border-box;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__inner {
    width: min(100%, {{ section.settings.max_width }}px);
    margin: 0 auto;
    padding:
      {{ section.settings.padding_top }}px
      {{ section.settings.padding_x }}px
      {{ section.settings.padding_bottom }}px;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__intro {
    margin-bottom: {{ section.settings.intro_bottom }}px;
    max-width: {{ section.settings.intro_max_width }}px;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__kicker {
    color: var(--if-accent);
    font-family: var(--ocs-font-kicker, "Nunito", sans-serif);
    font-size: var(--ocs-type-kicker, 14px);
    font-weight: var(--ocs-weight-kicker, 500);
    line-height: var(--ocs-line-kicker, 1.2);
    letter-spacing: var(--ocs-tracking-kicker, 0.08em);
    text-transform: var(--ocs-transform-kicker, uppercase);
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__heading {
    margin-top: 8px;
    font-family: var(--ocs-font-heading, "Cormorant Garamond", serif);
    font-size: var(--if-heading-size);
    font-weight: var(--ocs-weight-{{ section.settings.heading_role }}, 500);
    line-height: var(--ocs-line-{{ section.settings.heading_role }}, 1.08);
    letter-spacing: var(--ocs-tracking-{{ section.settings.heading_role }}, -0.015em);
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__shell {
    position: relative;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__viewport {
    overflow: visible;
    width: 100%;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__track {
    display: flex;
    gap: {{ section.settings.gap }}px;
    transition: transform .7s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__slide {
    position: relative;
    flex: 0 0 {{ section.settings.card_width }}%;
    height: {{ section.settings.card_height }}px;
    border-radius: {{ section.settings.card_radius }}px;
    overflow: hidden;
    transform: scale(.92);
    opacity: .6;
    transition:
      transform .55s cubic-bezier(.2,.8,.2,1),
      opacity .45s ease,
      filter .45s ease;
    filter: saturate(.82);
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__slide.is-active {
    transform: scale(1);
    opacity: 1;
    filter: saturate(1);
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__slide.is-prev,
  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__slide.is-next {
    opacity: .86;
    transform: scale(.96);
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__media {
    position: absolute;
    inset: 0;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__media picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__image,
  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__placeholder {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.03);
    transition: transform 1s cubic-bezier(.2,.8,.2,1);
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__slide.is-active .ocs-immersive-flow__image {
    transform: scale(1);
  }


  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__content {
    position: absolute;
    left: {{ section.settings.content_left }}px;
    bottom: {{ section.settings.content_bottom }}px;
    z-index: 2;
    width: min({{ section.settings.content_width }}px, calc(100% - 56px));
    color: var(--slide-text);
    padding: {{ section.settings.text_panel_padding_y }}px {{ section.settings.text_panel_padding_x }}px;
    border-radius: {{ section.settings.text_panel_radius }}px;
    background: rgba(17, 21, 17, {{ section.settings.text_panel_opacity | divided_by: 100.0 }});
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__count {
    margin-bottom: 16px;
    font-size: var(--if-count-size);
    font-weight: var(--ocs-weight-{{ section.settings.count_role }}, 600);
    line-height: var(--ocs-line-{{ section.settings.count_role }}, 1.3);
    letter-spacing: var(--ocs-tracking-{{ section.settings.count_role }}, .08em);
    text-transform: uppercase;
    opacity: .82;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__count span {
    opacity: .45;
    padding: 0 4px;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__slide-kicker {
    color: var(--slide-accent);
    font-family: var(--ocs-font-kicker, "Nunito", sans-serif);
    font-size: var(--if-slide-kicker-size);
    font-weight: var(--ocs-weight-{{ section.settings.slide_kicker_role }}, 500);
    line-height: var(--ocs-line-{{ section.settings.slide_kicker_role }}, 1.2);
    letter-spacing: var(--ocs-tracking-{{ section.settings.slide_kicker_role }}, .08em);
    text-transform: uppercase;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__slide-heading {
    margin-top: 10px;
    font-family: var(--ocs-font-heading, "Cormorant Garamond", serif);
    font-size: var(--if-slide-heading-size);
    font-weight:
      {% if section.settings.slide_heading_role_desktop == 'custom' %}
        500
      {% else %}
        var(--ocs-weight-{{ section.settings.slide_heading_role_desktop }}, 500)
      {% endif %};
    line-height:
      {% if section.settings.slide_heading_role_desktop == 'custom' %}
        1.02
      {% else %}
        var(--ocs-line-{{ section.settings.slide_heading_role_desktop }}, 1.02)
      {% endif %};
    letter-spacing:
      {% if section.settings.slide_heading_role_desktop == 'custom' %}
        -0.01em
      {% else %}
        var(--ocs-tracking-{{ section.settings.slide_heading_role_desktop }}, -0.01em)
      {% endif %};
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__slide-text,
  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__slide-text p {
    color: inherit;
    font-family: var(--ocs-font-body, "Nunito", sans-serif);
    font-size: var(--if-slide-text-size);
    font-weight: var(--ocs-weight-{{ section.settings.slide_text_role }}, 400);
    line-height: var(--ocs-line-{{ section.settings.slide_text_role }}, 1.6);
    letter-spacing: var(--ocs-tracking-{{ section.settings.slide_text_role }}, 0);
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__slide-text {
    margin-top: 14px;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__slide-text p {
    margin: 0;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    color: inherit;
    text-decoration: none;
    font-family: var(--ocs-font-button, var(--ocs-font-body, "Nunito", sans-serif));
    font-size: var(--if-slide-button-size);
    font-weight: var(--ocs-weight-{{ section.settings.slide_button_role }}, 500);
    line-height: var(--ocs-line-{{ section.settings.slide_button_role }}, 1.2);
    letter-spacing: var(--ocs-tracking-{{ section.settings.slide_button_role }}, 0.01em);
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__arrow {
    position: absolute;
    top: 50%;
    z-index: 6;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
    border-radius: 999px;
    border: 1px solid var(--if-border);
    background: var(--if-bg);
    color: var(--if-text);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 18px;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__arrow--prev {
    left: -18px;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__arrow--next {
    right: -18px;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__footer {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: {{ section.settings.footer_top }}px;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__progress {
    position: relative;
    flex: 1;
    height: 2px;
    background: var(--if-border);
    overflow: hidden;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 25%;
    background: var(--if-accent);
    transition: width .4s ease;
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__footer-count {
    min-width: 56px;
    text-align: right;
    color: var(--if-muted);
    font-size: var(--if-count-size);
    font-weight: var(--ocs-weight-{{ section.settings.count_role }}, 600);
    line-height: var(--ocs-line-{{ section.settings.count_role }}, 1.3);
    letter-spacing: var(--ocs-tracking-{{ section.settings.count_role }}, .08em);
  }

  #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__footer-sep {
    opacity: .4;
    padding: 0 3px;
  }

  @media screen and (max-width: 749px) {
    #OcsImmersiveFlow-{{ section.id }} {
      --if-heading-size: var(--ocs-type-{{ section.settings.heading_role }}-mobile, var(--if-heading-size));

      
      --if-slide-kicker-size: var(--ocs-type-{{ section.settings.slide_kicker_role }}-mobile, var(--if-slide-kicker-size));
      --if-slide-button-size: var(--ocs-type-{{ section.settings.slide_button_role }}-mobile, var(--if-slide-button-size));
      --if-count-size: var(--ocs-type-{{ section.settings.count_role }}-mobile, var(--if-count-size));

      margin-top: {{ section.settings.margin_top_mobile }}px;
      margin-bottom: {{ section.settings.margin_bottom_mobile }}px;
    }

    #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__inner {
      padding:
        {{ section.settings.padding_top_mobile }}px
        {{ section.settings.padding_x_mobile }}px
        {{ section.settings.padding_bottom_mobile }}px;
    }

    #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__intro {
      margin-bottom: {{ section.settings.intro_bottom_mobile }}px;
    }

    #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__kicker {
      font-size: var(--ocs-type-kicker-mobile, 12px);
    }

    #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__track {
      gap: {{ section.settings.gap_mobile }}px;
    }

    #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__slide {
      flex-basis: {{ section.settings.card_width_mobile }}%;
      height: {{ section.settings.card_height_mobile }}px;
      border-radius: {{ section.settings.card_radius_mobile }}px;
    }

    #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__content {
      left: {{ section.settings.content_left_mobile }}px;
      bottom: {{ section.settings.content_bottom_mobile }}px;
      width: min({{ section.settings.content_width_mobile }}px, calc(100% - 32px));
      padding: {{ section.settings.text_panel_padding_y_mobile }}px {{ section.settings.text_panel_padding_x_mobile }}px;
      background: rgba(17, 21, 17, var(--if-panel-opacity-mobile));
    }

    #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__count,
    #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__footer-count {
      display: none;
    }

    #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__slide-text,
    #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__slide-text p {
      font-size: var(--ocs-type-{{ section.settings.slide_text_role_mobile }}-mobile, var(--ocs-type-{{ section.settings.slide_text_role_mobile }}, 14px));
      font-weight: var(--ocs-weight-{{ section.settings.slide_text_role_mobile }}, 400);
      line-height: var(--ocs-line-{{ section.settings.slide_text_role_mobile }}, 1.6);
      letter-spacing: var(--ocs-tracking-{{ section.settings.slide_text_role_mobile }}, 0);
    }

    #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__slide-heading {
      font-size:
        {% if section.settings.slide_heading_role_mobile == 'custom' %}
          {{ section.settings.slide_heading_size_mobile }}px
        {% else %}
          var(--ocs-type-{{ section.settings.slide_heading_role_mobile }}-mobile, var(--ocs-type-{{ section.settings.slide_heading_role_mobile }}, {{ section.settings.slide_heading_size_mobile }}px))
        {% endif %};
      font-weight:
        {% if section.settings.slide_heading_role_mobile == 'custom' %}
          500
        {% else %}
          var(--ocs-weight-{{ section.settings.slide_heading_role_mobile }}, 500)
        {% endif %};
      line-height:
        {% if section.settings.slide_heading_role_mobile == 'custom' %}
          1.02
        {% else %}
          var(--ocs-line-{{ section.settings.slide_heading_role_mobile }}, 1.02)
        {% endif %};
      letter-spacing:
        {% if section.settings.slide_heading_role_mobile == 'custom' %}
          -0.01em
        {% else %}
          var(--ocs-tracking-{{ section.settings.slide_heading_role_mobile }}, -0.01em)
        {% endif %};
    }

    #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__arrow {
      width: 42px;
      height: 42px;
      {% unless section.settings.show_arrows_mobile %}
        display: none;
      {% endunless %}
    }

    #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__arrow--prev {
      left: 6px;
    }

    #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__arrow--next {
      right: 6px;
    }

    #OcsImmersiveFlow-{{ section.id }} .ocs-immersive-flow__footer {
      margin-top: {{ section.settings.footer_top_mobile }}px;
    }
  }
</style>

<script>
(() => {
  const section = document.getElementById('OcsImmersiveFlow-{{ section.id }}');
  if (!section || section.dataset.ready === 'true') return;

  const track = section.querySelector('[data-immersive-track]');
  const slides = [...section.querySelectorAll('[data-immersive-slide]')];
  const prev = section.querySelector('[data-immersive-prev]');
  const next = section.querySelector('[data-immersive-next]');
  const progress = section.querySelector('[data-immersive-progress]');
  const current = section.querySelector('[data-immersive-current]');
  const total = section.querySelector('[data-immersive-total]');

  if (!track || slides.length === 0) return;
  section.dataset.ready = 'true';

  let index = 0;
  let timer = null;

  const format = n => String(n).padStart(2, '0');

  const gap = () => parseFloat(getComputedStyle(track).gap || 0);

  const slideWidth = () => slides[0].getBoundingClientRect().width;

  const updateClasses = () => {
    slides.forEach((slide, i) => {
      slide.classList.toggle('is-active', i === index);
      slide.classList.toggle('is-prev', i === index - 1);
      slide.classList.toggle('is-next', i === index + 1);
    });
  };

  const update = (animate = true) => {
    if (!animate) track.style.transition = 'none';

    const offset = index * (slideWidth() + gap());
    track.style.transform = `translateX(-${offset}px)`;

    current.textContent = format(index + 1);
    total.textContent = format(slides.length);
    progress.style.width = `${((index + 1) / slides.length) * 100}%`;

    updateClasses();

    if (!animate) {
      requestAnimationFrame(() => {
        track.style.transition = '';
      });
    }
  };

  const go = nextIndex => {
    index = Math.max(0, Math.min(slides.length - 1, nextIndex));
    update();
  };

  prev?.addEventListener('click', () => go(index - 1));
  next?.addEventListener('click', () => go(index + 1));

  slides.forEach((slide, i) => {
    slide.addEventListener('click', () => {
      if (i !== index) go(i);
    });
  });

  window.addEventListener('resize', () => update(false), { passive: true });

  {% if section.settings.autoplay %}
    const stop = () => {
      if (timer) clearInterval(timer);
      timer = null;
    };

    const start = () => {
      stop();
      timer = setInterval(() => {
        index = index >= slides.length - 1 ? 0 : index + 1;
        update();
      }, {{ section.settings.autoplay_seconds | times: 1000 }});
    };

    section.addEventListener('mouseenter', stop);
    section.addEventListener('mouseleave', start);
    start();
  {% endif %}

  update(false);
})();
</script>

{% schema %}
{"name":"OCS – Immersive Flow","tag":"section","class":"section-ocs-immersive-flow","max_blocks":8,"settings":[{"type":"header","content":"Inhalt"},{"type":"inline_richtext","id":"kicker","label":"Kicker","default":"Unsere Geschichten"},{"type":"inline_richtext","id":"heading","label":"Überschrift","default":"Vom Ursprung bis in die Tasse"},{"type":"select","id":"heading_role","label":"Schriftrolle Section-Überschrift","default":"h2","options":[{"value":"h1","label":"Page Heading"},{"value":"h2","label":"Section Heading"},{"value":"h3","label":"Card Heading"},{"value":"h4","label":"Small Heading"}]},{"type":"select","id":"slide_heading_role_desktop","label":"Schriftrolle Slide-Überschrift Desktop","default":"custom","options":[{"value":"custom","label":"Individuelle Größe wie bisher"},{"value":"h1","label":"Page Heading"},{"value":"h2","label":"Section Heading"},{"value":"h3","label":"Card Heading"},{"value":"h4","label":"Small Heading"}]},{"type":"select","id":"slide_heading_role_mobile","label":"Schriftrolle Slide-Überschrift Mobil","default":"custom","options":[{"value":"custom","label":"Individuelle Größe wie bisher"},{"value":"h1","label":"Page Heading"},{"value":"h2","label":"Section Heading"},{"value":"h3","label":"Card Heading"},{"value":"h4","label":"Small Heading"}]},{"type":"select","id":"slide_text_role","label":"Schriftrolle Slide-Text Desktop","default":"body","options":[{"value":"lead","label":"Lead"},{"value":"body","label":"Body"},{"value":"body-small","label":"Body Small"}]},{"type":"select","id":"slide_text_role_mobile","label":"Schriftrolle Slide-Text Mobil","default":"body","options":[{"value":"lead","label":"Lead"},{"value":"body","label":"Body"},{"value":"body-small","label":"Body Small"}]},{"type":"select","id":"slide_kicker_role","label":"Schriftrolle Slide-Kicker","default":"kicker","options":[{"value":"kicker","label":"Kicker"},{"value":"label","label":"Label"},{"value":"label-small","label":"Label Small"}]},{"type":"select","id":"slide_button_role","label":"Schriftrolle Slide-Link/Button","default":"body-small","options":[{"value":"button","label":"Button"},{"value":"body","label":"Body"},{"value":"body-small","label":"Body Small"}]},{"type":"select","id":"count_role","label":"Schriftrolle Zähler","default":"label-small","options":[{"value":"label","label":"Label"},{"value":"label-small","label":"Label Small"},{"value":"caption","label":"Caption"}]},{"type":"header","content":"Layout Desktop"},{"type":"checkbox","id":"use_design_system","label":"OCS Design-System verwenden","default":true},{"type":"range","id":"max_width","min":1100,"max":1800,"step":20,"unit":"px","label":"Maximale Breite","default":1500},{"type":"range","id":"padding_top","min":0,"max":120,"step":2,"unit":"px","label":"Innenabstand oben","default":48},{"type":"range","id":"padding_bottom","min":0,"max":120,"step":2,"unit":"px","label":"Innenabstand unten","default":38},{"type":"range","id":"padding_x","min":12,"max":80,"step":2,"unit":"px","label":"Innenabstand horizontal","default":36},{"type":"range","id":"intro_bottom","min":10,"max":70,"step":2,"unit":"px","label":"Abstand Intro / Slider","default":26},{"type":"range","id":"intro_max_width","min":360,"max":900,"step":20,"unit":"px","label":"Max. Introbreite","default":620},{"type":"range","id":"card_width","min":50,"max":78,"step":1,"unit":"%","label":"Slide-Breite Desktop","default":62},{"type":"range","id":"card_height","min":460,"max":760,"step":20,"unit":"px","label":"Slide-Höhe Desktop","default":560},{"type":"range","id":"card_radius","min":0,"max":36,"step":2,"unit":"px","label":"Slide-Radius","default":18},{"type":"range","id":"gap","min":8,"max":40,"step":2,"unit":"px","label":"Abstand Slides","default":16},{"type":"range","id":"content_left","min":16,"max":80,"step":2,"unit":"px","label":"Text links","default":34},{"type":"range","id":"content_bottom","min":20,"max":100,"step":2,"unit":"px","label":"Text unten","default":34},{"type":"range","id":"content_width","min":260,"max":560,"step":20,"unit":"px","label":"Textbreite","default":420},{"type":"range","id":"slide_heading_size","min":28,"max":64,"step":2,"unit":"px","label":"Slide-Überschrift","default":44},{"type":"range","id":"footer_top","min":10,"max":40,"step":2,"unit":"px","label":"Abstand Navigation","default":18},{"type":"range","id":"margin_top","min":-80,"max":80,"step":2,"unit":"px","label":"Außenabstand oben","default":0},{"type":"range","id":"margin_bottom","min":-80,"max":80,"step":2,"unit":"px","label":"Außenabstand unten","default":0},{"type":"header","content":"Text-Hintergrund"},{"type":"range","id":"text_panel_opacity","min":20,"max":90,"step":5,"unit":"%","label":"Deckkraft Text-Hintergrund","default":60},{"type":"range","id":"text_panel_opacity_mobile","min":0,"max":90,"step":5,"unit":"%","label":"Deckkraft Text-Hintergrund Mobil","default":45},{"type":"range","id":"text_panel_padding_x","min":12,"max":60,"step":2,"unit":"px","label":"Innenabstand horizontal","default":28},{"type":"range","id":"text_panel_padding_y","min":12,"max":60,"step":2,"unit":"px","label":"Innenabstand vertikal","default":24},{"type":"range","id":"text_panel_radius","min":0,"max":24,"step":2,"unit":"px","label":"Radius Text-Hintergrund","default":0},{"type":"range","id":"text_panel_padding_x_mobile","min":10,"max":36,"step":2,"unit":"px","label":"Innenabstand horizontal Mobil","default":20},{"type":"range","id":"text_panel_padding_y_mobile","min":10,"max":36,"step":2,"unit":"px","label":"Innenabstand vertikal Mobil","default":18},{"type":"header","content":"Mobil"},{"type":"range","id":"padding_top_mobile","min":0,"max":90,"step":2,"unit":"px","label":"Innenabstand oben","default":30},{"type":"range","id":"padding_bottom_mobile","min":0,"max":90,"step":2,"unit":"px","label":"Innenabstand unten","default":26},{"type":"range","id":"padding_x_mobile","min":12,"max":32,"step":1,"unit":"px","label":"Innenabstand horizontal","default":16},{"type":"range","id":"intro_bottom_mobile","min":8,"max":50,"step":2,"unit":"px","label":"Abstand Intro / Slider","default":18},{"type":"range","id":"card_width_mobile","min":78,"max":94,"step":1,"unit":"%","label":"Slide-Breite Mobil","default":86},{"type":"range","id":"card_height_mobile","min":440,"max":720,"step":20,"unit":"px","label":"Slide-Höhe Mobil","default":520},{"type":"range","id":"card_radius_mobile","min":0,"max":30,"step":2,"unit":"px","label":"Slide-Radius Mobil","default":16},{"type":"range","id":"gap_mobile","min":8,"max":24,"step":1,"unit":"px","label":"Abstand Slides Mobil","default":12},{"type":"range","id":"content_left_mobile","min":14,"max":40,"step":1,"unit":"px","label":"Text links Mobil","default":20},{"type":"range","id":"content_bottom_mobile","min":18,"max":70,"step":2,"unit":"px","label":"Text unten Mobil","default":24},{"type":"range","id":"content_width_mobile","min":220,"max":360,"step":10,"unit":"px","label":"Textbreite Mobil","default":280},{"type":"range","id":"slide_heading_size_mobile","min":26,"max":46,"step":2,"unit":"px","label":"Slide-Überschrift Mobil","default":34},{"type":"checkbox","id":"show_arrows_mobile","label":"Pfeile Mobil anzeigen","default":false},{"type":"range","id":"footer_top_mobile","min":8,"max":30,"step":2,"unit":"px","label":"Abstand Navigation Mobil","default":14},{"type":"range","id":"margin_top_mobile","min":-60,"max":60,"step":2,"unit":"px","label":"Außenabstand oben Mobil","default":0},{"type":"range","id":"margin_bottom_mobile","min":-60,"max":60,"step":2,"unit":"px","label":"Außenabstand unten Mobil","default":0},{"type":"header","content":"Autoplay"},{"type":"checkbox","id":"autoplay","label":"Automatisch wechseln","default":false},{"type":"range","id":"autoplay_seconds","min":3,"max":10,"step":1,"unit":"s","label":"Wechselintervall","default":6},{"type":"header","content":"Farben"},{"type":"color","id":"background_color","label":"Hintergrund","default":"#f8f6e9"},{"type":"color","id":"text_color","label":"Text","default":"#30240a"},{"type":"color","id":"muted_color","label":"Sekundärtext","default":"#5a5143"},{"type":"color","id":"accent_color","label":"Akzent","default":"#467a3a"},{"type":"color","id":"border_color","label":"Linie","default":"#e4d9c3"}],"blocks":[{"type":"slide","name":"Slide","settings":[{"type":"image_picker","id":"image","label":"Bild"},{"type":"image_picker","id":"image_mobile","label":"Bild Mobil (optional)"},{"type":"inline_richtext","id":"kicker","label":"Kicker","default":"Vor Ort"},{"type":"inline_richtext","id":"heading","label":"Überschrift","default":"Gemeinsam wachsen."},{"type":"richtext","id":"text","label":"Text","default":"<p>Wir begleiten unsere Partner über viele Jahre und unterstützen nachhaltige Projekte vor Ort.</p>"},{"type":"text","id":"button_label","label":"Button","default":"Mehr erfahren"},{"type":"url","id":"button_link","label":"Button Link"},{"type":"color","id":"text_color","label":"Textfarbe","default":"#fffdf8"},{"type":"color","id":"accent_color","label":"Akzentfarbe","default":"#8fb98a"}]}],"presets":[{"name":"OCS – Immersive Flow","blocks":[{"type":"slide"},{"type":"slide"},{"type":"slide"},{"type":"slide"}]}]}
{% endschema %}

}