/** Shopify CDN: Minification failed

Line 1164:50 Expected ")" to end URL token
Line 1204:50 Expected ")" to end URL token
Line 3387:50 Expected ")" to end URL token
Line 16164:50 Expected ")" to end URL token
Line 18191:50 Expected ")" to end URL token
Line 20431:50 Expected ")" to end URL token

**/
/* =============================================================
   Liquiflow Starter Theme — "Blueprint" · Client-First
   -------------------------------------------------------------
   Nüchtern, elegant, marktneutral. Warme Papiertöne, Hairline-
   Borders, ruhige Typografie — angelehnt an Tool-Ästhetik
   (Notion/Linear): weißer Canvas, sanfte Panels, präzise Details.

   Struktur (Finsweet Client-First):
   1.  Design-Tokens
   2.  Reset & Base
   3.  Typografie
   4.  Layout-Struktur
   5.  Utilities
   6.  Buttons
   7.  Formulare
   8.  Icons
   9.  Navigation (Header, Dropdowns, Suche, Mini-Cart)
   10. Predictive Search
   11. Mini-Cart
   12. Footer & Sprach-Picker
   13. Hero / Content-Header
   14. Produkt-Karte
   15. Produkt-Listen & Featured Sections
   16. Collections
   17. Blog
   18. Pagination
   19. Filter (Collection/Search)
   20. Produktseite
   21. Cart-Seite
   22. Contact / Password / Gift-Card / Default
   23. Swiper-Helfer

   Breakpoints (desktop-first, NUR max-width):
   (max-width: 991px) Tablet · (max-width: 767px) Mobile Landscape · (max-width: 479px) Mobile
   ============================================================= */

/* =============================================================
   1. Design-Tokens
   ============================================================= */
:root {
  --color--green: #0f5636;
  --color--green-dark: #0a3b25;
  --color--green-light: #e7eeea;
  --color--red: #c5393c;
  --color--red-dark: #a52d30;
  --color--red-light: #f8ecec;
  --color--brand-red: #d91920;
  --color--dark: #232e20;
  --color--dark-soft: #3a4636;
  --color--white: #ffffff;
  --color--grey: #f6f6f6;
  --color--grey-dark: #ebebeb;
  --color--stars: #f09628;
  --cat--food: #5c7f53;
  --cat--care: #4f78a7;
  --cat--accessories: #9a5970;
  --color--neutral-darkest: #232e20;
  --color--neutral-darker: #3a4636;
  --color--neutral-dark: #5c6459;
  --color--neutral: #7f867c;
  --color--neutral-light: #b3b8b0;
  --color--neutral-lighter: #dcdfda;
  --color--neutral-lightest: #f0f1ef;
  --color--success: #e7f0e5;
  --color--success-dark: #2f6b28;
  --color--error: #f8ecec;
  --color--error-dark: #a52d30;
  --color--focus: #0f5636;
  --text-color--primary: var(--color--dark);
  --text-color--secondary: rgba(35, 46, 32, 0.7);
  --text-color--alternate: var(--color--white);
  --background-color--primary: var(--color--white);
  --background-color--secondary: var(--color--grey);
  --background-color--card: var(--color--white);
  --background-color--dark: var(--color--dark);
  --border-color--primary: rgba(35, 46, 32, 0.12);
  --border-color--strong: rgba(35, 46, 32, 0.24);
  --border-color--dark: var(--color--dark);
  --border-color--light: rgba(255, 255, 255, 0.24);
  --gradient--card: linear-gradient(180.83deg, #fafafa 5.26%, #fffcfc 65.37%, #ebebeb 117.58%);
  --font--family: "Myriad Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font--script: "Ms Madi", "Brush Script MT", cursive;
  --tracking--heading: -0.03em;
  --tracking--h4: 0.01em;
  --tracking--subline: 0.02em;
  --tracking--link: 0.04em;
  --tracking--link-small: 0.03em;
  --tracking--script: 0.002em;
  --font-size--h1: 3.25rem;
  --font-size--h2: 2.25rem;
  --font-size--h3: 2rem;
  --font-size--h4: 1.5rem;
  --font-size--h5: 1.25rem;
  --font-size--h6: 1.0625rem;
  /* Figma-Variablen (Desktop | Mobile ab 767px):
     subline 3 15|14, body 1 16|15, body 2 14|14, body 3 13|13,
     link 1 16|15, link 2 14|13, link 3 12|12,
     Ms Madi h1 40|34, h2 36|26, h3 32|22 */
  --font-size--subline-3: 0.9375rem;
  --font-size--body: 1rem;
  --font-size--body-2: 0.875rem;
  --font-size--body-3: 0.8125rem;
  --font-size--link: 1rem;
  --font-size--link-2: 0.875rem;
  --font-size--link-3: 0.75rem;
  --font-size--script-h1: 2.5rem;
  --font-size--script-h2: 2.25rem;
  --font-size--script-h3: 2rem;
  --radius--small: 0.375rem;
  --radius--medium: 0.625rem;
  --radius--large: 0.75rem;
  --radius--xlarge: 1.25rem;
  --radius--pill: 6.25rem;
  --button--radius: 0rem;
  --shadow--xs: 0 0.0625rem 0.125rem rgba(35, 46, 32, 0.05);
  --shadow--sm: 0 0.0625rem 0.1875rem rgba(35, 46, 32, 0.06), 0 0.25rem 0.75rem rgba(35, 46, 32, 0.05);
  --shadow--md: 0 0.125rem 0.375rem rgba(35, 46, 32, 0.06), 0 0.75rem 1.75rem rgba(35, 46, 32, 0.08);
  --shadow--lg: 0 0.25rem 0.75rem rgba(35, 46, 32, 0.08), 0 1.5rem 3.5rem rgba(35, 46, 32, 0.12);
  --container--large: 80rem;
  --container--medium: 64rem;
  --container--small: 50rem;
  --space--4: 0.25rem;
  --space--8: 0.5rem;
  --space--12: 0.75rem;
  --space--16: 1rem;
  --space--20: 1.25rem;
  --space--24: 1.5rem;
  --space--28: 1.75rem;
  --space--32: 2rem;
  --space--40: 2.5rem;
  --space--48: 3rem;
  --space--64: 4rem;
  --space--80: 5rem;
  --space--100: 6.25rem;
  --space--120: 7.5rem;
  --section-padding--small: 2.5rem;
  --section-padding--medium: 5rem;
  --section-padding--large: 7.5rem;
  --nav--height: 4rem;
  --nav--topbar-height: 2.125rem;
  --transition--fast: 140ms ease;
  --transition--base: 220ms cubic-bezier(0.3, 0.7, 0.3, 1);
}

/* =============================================================
   Webfonts — nur lokale Dateien, nichts von Google.
   -------------------------------------------------------------
   Erste Quelle: relativ zur CSS-Datei. Im Shop liegen main.css und
   die .woff2 gemeinsam in assets/, der Pfad trifft dort also direkt.
   Zweite Quelle: /fonts/ fuer Builder und lokale Vorschau.
   ============================================================= */
@font-face {
  font-family: "Myriad Pro";
  src: url(//www.p-jentschura.com/cdn/shop/t/8/assets/MyriadPro-Regular.woff2?v=120439723496282854521790237663) format("woff2"), url(//www.p-jentschura.com/cdn/shop/t/8/assets/MyriadPro-Regular.woff2?v=120439723496282854521790237663) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url(//www.p-jentschura.com/cdn/shop/t/8/assets/MyriadPro-Semibold.woff2?v=11270076879560919251790237664) format("woff2"), url(//www.p-jentschura.com/cdn/shop/t/8/assets/MyriadPro-Semibold.woff2?v=11270076879560919251790237664) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url(//www.p-jentschura.com/cdn/shop/t/8/assets/MyriadPro-SemiboldItalic.woff2?v=180185875474222184121790237664) format("woff2"), url(//www.p-jentschura.com/cdn/shop/t/8/assets/MyriadPro-SemiboldItalic.woff2?v=180185875474222184121790237664) format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url(//www.p-jentschura.com/cdn/shop/t/8/assets/MyriadPro-Bold.woff2?v=134690180710437819291790237661) format("woff2"), url(//www.p-jentschura.com/cdn/shop/t/8/assets/MyriadPro-Bold.woff2?v=134690180710437819291790237661) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url(//www.p-jentschura.com/cdn/shop/t/8/assets/MyriadPro-BoldItalic.woff2?v=45600417292170112701790237662) format("woff2"), url(//www.p-jentschura.com/cdn/shop/t/8/assets/MyriadPro-BoldItalic.woff2?v=45600417292170112701790237662) format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Ms Madi";
  src: url(//www.p-jentschura.com/cdn/shop/t/8/assets/MsMadi-Regular.woff2?v=163132490444550258811790237661) format("woff2"), url(//www.p-jentschura.com/cdn/shop/t/8/assets/MsMadi-Regular.woff2?v=163132490444550258811790237661) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =============================================================
   2. Reset & Base
   ============================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 1rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font--family);
  font-size: var(--font-size--body);
  line-height: 1.7;
  color: var(--text-color--primary);
  background-color: var(--background-color--primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

img {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

::selection {
  color: var(--color--white);
  background: var(--color--ink);
}

*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}

/* Liquiflow-Marker im Browser/Builder unsichtbar */
.li-custom,
.li-tag,
.global-styles,
[li-cloak="hide"],
[x-cloak] {
  display: none !important;
}

/* =============================================================
   3. Typografie
   -------------------------------------------------------------
   Headings sind im Design Bold Italic, Sublines Semibold Italic.
   Letter-Spacings der Figma-Variablen sind Prozentwerte -> em.
   ============================================================= */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
  text-wrap: balance;
}

p {
  margin: 0 0 var(--space--12);
}

p:last-child {
  margin-bottom: 0;
}

blockquote {
  margin: 0;
  padding: var(--space--12) var(--space--24);
  border-left: 0.1875rem solid var(--color--green);
  font-size: 1.25rem;
  font-style: italic;
  letter-spacing: var(--tracking--subline);
}

h1, .heading-style-h1 { font-size: var(--font-size--h1); line-height: 1; }
h2, .heading-style-h2 { font-size: var(--font-size--h2); line-height: 1.2; }
h3, .heading-style-h3 { font-size: var(--font-size--h3); line-height: 1.2; }
h4, .heading-style-h4 { font-size: var(--font-size--h4); line-height: 1.1; letter-spacing: var(--tracking--h4); }
h5, .heading-style-h5 { font-size: var(--font-size--h5); line-height: 1.2; letter-spacing: var(--tracking--h4); }
h6, .heading-style-h6 { font-size: var(--font-size--h6); line-height: 1.2; letter-spacing: var(--tracking--h4); }

.heading-style-h1, .heading-style-h2, .heading-style-h3,
.heading-style-h4, .heading-style-h5, .heading-style-h6 {
  display: block;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
  text-wrap: balance;
}

/* Handschrift-Akzente (Ms Madi) */
.heading-style-script,
.text-style-script {
  font-family: var(--font--script);
  font-style: normal;
  font-weight: 400;
  line-height: 1.66;
  letter-spacing: var(--tracking--script);
  text-wrap: balance;
}

.heading-style-script {
  font-size: var(--font-size--script-h3);
}
.heading-style-script.is-large {
  font-size: var(--font-size--script-h1);
}   /* 40 | 34 */
.heading-style-script.is-medium {
  font-size: var(--font-size--script-h2);
} /* 36 | 26 */
.heading-style-script.is-small {
  font-size: 1.75rem;
}  /* 28 */

/* Sublines / Eyebrows */
.text-style-subline,
.text-style-eyebrow {
  display: block;
  font-weight: 600;
  font-style: italic;
  font-size: var(--font-size--h5);
  line-height: 1.2;
  letter-spacing: var(--tracking--subline);
}

.text-style-subline.is-small,
.text-style-eyebrow.is-small {
  font-size: var(--font-size--h6);
  letter-spacing: 0;
}

/* Groessen (Design: body 16/1.7, body2 14/1.4, body3 13/1.5) */
.text-size-large {
  font-size: var(--font-size--h5);
  line-height: 1.6;
}
.text-size-medium {
  font-size: 1.125rem;
  line-height: 1.65;
}
.text-size-regular {
  font-size: var(--font-size--body);
  line-height: 1.7;
}
.text-size-small {
  font-size: var(--font-size--body-2);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
}
.text-size-tiny {
  font-size: var(--font-size--body-3);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
}

/* Link-/Label-Typografie */
.text-style-link-label {
  font-weight: 600;
  font-size: var(--font-size--link);
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
}

.text-style-link-label.is-small {
  font-size: var(--font-size--link-2);
}
.text-style-link-label.is-tiny {
  font-size: var(--font-size--link-3);
  letter-spacing: var(--tracking--link-small);
}

.text-weight-bold {
  font-weight: 700;
}
.text-weight-semibold {
  font-weight: 600;
}
.text-weight-normal {
  font-weight: 400;
}
.text-style-italic {
  font-style: italic;
}

.text-style-muted {
  color: var(--text-color--secondary);
  opacity: 1;
}
.text-style-strikethrough {
  text-decoration: line-through;
}
.text-style-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--tracking--link);
}
.text-style-link {
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
  text-decoration-color: var(--color--neutral-light);
  cursor: pointer;
  transition: text-decoration-color var(--transition--fast), color var(--transition--fast);
}

@media (hover: hover) {
  .text-style-link:hover {
    text-decoration-color: currentColor;
    color: var(--color--red);
  }
}

.text-align-center {
  text-align: center;
}
.text-align-right {
  text-align: right;
}
.text-align-left {
  text-align: left;
}

.text-color-white {
  color: var(--color--white);
}
.text-color-grey {
  color: var(--text-color--secondary);
}
.text-color-red {
  color: var(--color--red);
}
.text-color-green {
  color: var(--color--green);
}
.text-color-dark {
  color: var(--color--dark);
}
.text-color-stars {
  color: var(--color--stars);
}

.text-style-2lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text-style-3lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.text-style-4lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* Rich Text */
.text-rich-text {
  line-height: 1.7;
}

.text-rich-text h2 {
  margin: var(--space--32) 0 var(--space--12);
  font-size: var(--font-size--h3);
}
.text-rich-text h3 {
  margin: var(--space--28) 0 var(--space--12);
  font-size: var(--font-size--h4);
}
.text-rich-text h4 {
  margin: var(--space--24) 0 var(--space--8);
  font-size: var(--font-size--h5);
}
.text-rich-text p {
  margin-bottom: var(--space--16);
}
.text-rich-text ul,
.text-rich-text ol { margin: 0 0 var(--space--16); padding-left: 1.375rem; }
.text-rich-text ul {
  list-style: disc;
}
.text-rich-text ol {
  list-style: decimal;
}
.text-rich-text li {
  margin-bottom: var(--space--8);
}
.text-rich-text blockquote {
  margin: var(--space--24) 0;
}
.text-rich-text img {
  border-radius: var(--radius--medium);
}
.text-rich-text strong {
  font-weight: 600;
}
.text-rich-text a {
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
  color: var(--color--red);
}
.text-rich-text > :first-child {
  margin-top: 0;
}
.text-rich-text > :last-child {
  margin-bottom: 0;
}

/* Figma kennt nur Desktop und Mobile: Desktop-Werte bis 768px,
   Mobile-Werte ab Mobil quer (767px) */
@media (max-width: 767px) {
  :root {
    --font-size--h1: 2.125rem;
    --font-size--h2: 1.625rem;
    --font-size--h3: 1.5rem;
    --font-size--h4: 1.25rem;
    --font-size--h5: 1.0625rem;
    --font-size--h6: 0.9375rem;
    --font-size--subline-3: 0.875rem;
    --font-size--body: 0.9375rem;
    --font-size--link: 0.9375rem;
    --font-size--link-2: 0.8125rem;
    --font-size--script-h1: 2.125rem;
    --font-size--script-h2: 1.625rem;
    --font-size--script-h3: 1.375rem;
  }
}

/* =============================================================
   4. Layout-Struktur
   -------------------------------------------------------------
   Design: 1440 Frame, 80 px Gutter -> 1280 px Inhalt.
   ============================================================= */
.page-wrapper {
  overflow-x: clip;
  overflow-y: visible;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-wrapper {
  flex: 1;
}

.padding-global {
  padding-left: var(--space--80);
  padding-right: var(--space--80);
}

.padding-global.is-narrow {
  padding-left: var(--space--120);
  padding-right: var(--space--120);
}

.container-large {
  width: 100%;
  max-width: var(--container--large);
  margin-left: auto;
  margin-right: auto;
}

.container-medium {
  width: 100%;
  max-width: var(--container--medium);
  margin-left: auto;
  margin-right: auto;
}

.container-small {
  width: 100%;
  max-width: var(--container--small);
  margin-left: auto;
  margin-right: auto;
}

.container-full {
  width: 100%;
  max-width: none;
}

.padding-section-small {
  padding-top: var(--section-padding--small);
  padding-bottom: var(--section-padding--small);
}

.padding-section-medium {
  padding-top: var(--section-padding--medium);
  padding-bottom: var(--section-padding--medium);
}

.padding-section-large {
  padding-top: var(--section-padding--large);
  padding-bottom: var(--section-padding--large);
}

.headline-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space--24);
  flex-wrap: wrap;
  margin-bottom: var(--space--40);
}

@media (max-width: 991px) {
  .padding-global,
  .padding-global.is-narrow {
    padding-left: var(--space--40);
    padding-right: var(--space--40);
  }
  :root {
    --section-padding--medium: 3.5rem;
    --section-padding--large: 5rem;
  }
}

@media (max-width: 767px) {
  :root {
    --section-padding--small: 2rem;
    --section-padding--medium: 3rem;
    --section-padding--large: 4rem;
  }
  .padding-global,
  .padding-global.is-narrow {
    padding-left: var(--space--20);
    padding-right: var(--space--20);
  }
  .headline-wrapper {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: var(--space--24);
  }
}

/* =============================================================
   5. Utilities
   ============================================================= */
.spacer-xxsmall {
  padding-top: 0.5rem;
}
.spacer-xsmall {
  padding-top: 0.75rem;
}
.spacer-small {
  padding-top: 1rem;
}
.spacer-medium {
  padding-top: 2rem;
}
.spacer-large {
  padding-top: 3rem;
}

.margin-xsmall {
  margin: 0.75rem;
}
.margin-small {
  margin: 1rem;
}
.margin-medium {
  margin: 2rem;
}
.margin-large {
  margin: 3rem;
}

.padding-xsmall {
  padding: 0.75rem;
}
.padding-small {
  padding: 1rem;
}
.padding-medium {
  padding: 2rem;
}
.padding-large {
  padding: 3rem;
}

/* Directional overrides (Client-First) */
.margin-top {
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}
.margin-bottom {
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.margin-left {
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}
.margin-right {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}
.margin-vertical {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.margin-horizontal {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.padding-top {
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}
.padding-bottom {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.padding-left {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}
.padding-right {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}
.padding-vertical {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.padding-horizontal {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.margin-0 {
  margin: 0 !important;
}
.padding-0 {
  padding: 0 !important;
}
.spacing-clean {
  margin: 0 !important;
  padding: 0 !important;
}
.margin-top-auto {
  margin-top: auto;
}

.max-width-full {
  max-width: 100%;
}
.max-width-xlarge {
  max-width: 64rem;
}
.max-width-large {
  max-width: 48rem;
}
.max-width-medium {
  max-width: 35rem;
}
.max-width-small {
  max-width: 25rem;
}

.align-center {
  margin-left: auto;
  margin-right: auto;
}
.display-inlineflex {
  display: inline-flex;
}
.z-index-1 {
  position: relative;
  z-index: 1;
}

.outline-solid-1 {
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--large);
  overflow: hidden;
  background-color: var(--background-color--card);
  box-shadow: var(--shadow--xs);
}

.pointer-events-off {
  pointer-events: none;
}
.pointer-events-on {
  pointer-events: auto;
}

.hide {
  display: none !important;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

@media (max-width: 991px) {
  .hide-tablet {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hide-mobile-landscape {
    display: none !important;
  }
}

@media (max-width: 479px) {
  .hide-mobile {
    display: none !important;
  }
}

/* =============================================================
   6. Buttons
   -------------------------------------------------------------
   Design: rechteckig, 16 px Semibold, Letter-Spacing 4 %,
   Padding 16 px / 56 px, Primaerfarbe Rot #C5393C.
   ============================================================= */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space--8);
  border: 0.0625rem solid var(--color--red);
  background-color: var(--color--red);
  color: var(--color--white);
  text-align: center;
  white-space: nowrap;
  padding: var(--space--16) var(--space--48);
  font-weight: 600;
  font-size: var(--font-size--link);
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  border-radius: var(--button--radius);
  cursor: pointer;
  transition: background-color var(--transition--fast), border-color var(--transition--fast),
    color var(--transition--fast), transform var(--transition--fast);
}

@media (hover: hover) {
  .button:hover {
    background-color: var(--color--red-dark);
    border-color: var(--color--red-dark);
    color: var(--color--white);
  }
}

.button:active {
  transform: translateY(0.0625rem);
}

/* Sekundaer: gruen */
.button.is-green {
  background-color: var(--color--green);
  border-color: var(--color--green);
  color: var(--color--white);
}

@media (hover: hover) {
  .button.is-green:hover {
    background-color: var(--color--green-dark);
    border-color: var(--color--green-dark);
  }
}

/* Sekundaer: dunkel */
.button.is-dark {
  background-color: var(--color--dark);
  border-color: var(--color--dark);
  color: var(--color--white);
}

@media (hover: hover) {
  .button.is-dark:hover {
    background-color: #101711;
    border-color: #101711;
  }
}

/* Weiss gefuellt (auf dunklen Flaechen) */
.button.is-white {
  background-color: var(--color--white);
  border-color: var(--color--white);
  color: var(--color--dark);
}

@media (hover: hover) {
  .button.is-white:hover {
    background-color: var(--color--grey);
    border-color: var(--color--grey);
    color: var(--color--dark);
  }
}

/* Outline */
.button.is-secondary,
.button.is-outline {
  background-color: transparent;
  color: currentColor;
  border-color: currentColor;
}

@media (hover: hover) {
  .button.is-secondary:hover,
  .button.is-outline:hover {
    background-color: var(--color--dark);
    border-color: var(--color--dark);
    color: var(--color--white);
  }
}

.button.is-outline-white {
  background-color: transparent;
  border-color: var(--border-color--light);
  color: var(--color--white);
}

@media (hover: hover) {
  .button.is-outline-white:hover {
    background-color: var(--color--white);
    border-color: var(--color--white);
    color: var(--color--dark);
  }
}

/* Textlink-Button mit Pfeil */
.button.is-link {
  border: 0;
  background-color: transparent;
  color: currentColor;
  padding: 0;
  text-decoration: none;
  border-bottom: 0.0625rem solid currentColor;
  border-radius: 0;
  padding-bottom: var(--space--4);
}

@media (hover: hover) {
  .button.is-link:hover {
    background-color: transparent;
    color: var(--color--red);
  }
}

.button.is-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space--8);
}

.button.is-large {
  padding: var(--space--20) var(--space--64);
}

.button.is-small {
  padding: var(--space--12) var(--space--28);
  font-size: 0.875rem;
}

.button.is-tiny {
  padding: var(--space--8) var(--space--20);
  font-size: 0.75rem;
  letter-spacing: var(--tracking--link-small);
}

.button.max-width-full {
  width: 100%;
}

.button[disabled],
.button.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.button-group {
  display: flex;
  align-items: center;
  gap: var(--space--16);
  flex-wrap: wrap;
}

.button-group.is-center {
  justify-content: center;
}

.button-group.is-right {
  justify-content: flex-end;
}

.button-icon-left,
.button-icon-right {
  width: 1rem;
  height: 1rem;
  flex: none;
}

@media (max-width: 767px) {
  .button {
    padding: var(--space--16) var(--space--32);
  }
  .button.is-large {
    padding: var(--space--16) var(--space--40);
  }
}

/* =============================================================
   7. Formulare
   ============================================================= */
.form_form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form_field-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form_field-label {
  font-size: 0.875rem;
  font-weight: 500;
}

.form_hidden-label {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form_input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 0.0625rem solid var(--border-color--strong);
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  font-size: 0.9375rem;
  line-height: 1.4;
  box-shadow: var(--shadow--xs);
  transition: border-color var(--transition--fast), box-shadow var(--transition--fast);
}

.form_input:focus {
  outline: none;
  border-color: var(--color--ink);
  box-shadow: 0 0 0 0.1875rem rgba(55, 53, 47, 0.08);
}

.form_input.is-text-area {
  min-height: 8rem;
  resize: vertical;
}

.form_input.is-quantity {
  width: 4.5rem;
  flex: none;
  text-align: center;
}

.form_input::placeholder {
  color: var(--color--neutral-light);
}

/* Checkbox: verstecktes Input + gestyltes Icon-Div (Contact)
   ODER natives Input mit .form_checkbox-icon (Footer-Newsletter) */
.form_checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
}

div.form_checkbox-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-top: 0.2rem;
  border: 0.0625rem solid var(--border-color--strong);
  border-radius: var(--radius--small);
  background-color: var(--color--white);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 0.7rem;
  transition: border-color var(--transition--fast), background-color var(--transition--fast);
}

.form_checkbox:has(input:checked) div.form_checkbox-icon {
  border-color: var(--color--ink);
  background-color: var(--color--ink);
  background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.5 12L13 4.5' stroke='white' stroke-width='2'/%3E%3C/svg%3E);
}

input.form_checkbox-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  margin: 0.2rem 0 0;
  accent-color: var(--color--ink);
}

.form_checkbox-label {
  cursor: pointer;
  color: var(--text-color--secondary);
}

.success-message {
  padding: 1rem 1.25rem;
  border-radius: var(--radius--medium);
  background-color: var(--color--success);
  color: var(--color--success-dark);
}

.error-message {
  padding: 1rem 1.25rem;
  border-radius: var(--radius--medium);
  background-color: var(--color--error);
  color: var(--color--error-dark);
}

/* Sortier-Select (Filter) */
.sort_select {
  padding: 0.5rem 2.25rem 0.5rem 0.875rem;
  border: 0.0625rem solid var(--border-color--strong);
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  font-size: 0.875rem;
  cursor: pointer;
  appearance: none;
  box-shadow: var(--shadow--xs);
  background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2337352f' stroke-width='1.5'/%3E%3C/svg%3E);
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 0.875rem;
  transition: border-color var(--transition--fast);
}

@media (hover: hover) {
  .sort_select:hover {
    border-color: var(--color--neutral-light);
  }
}

/* =============================================================
   8. Icons
   ============================================================= */
.icon-embed-xsmall {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-embed-xxsmall {
  width: 1rem;
  height: 1rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-1x1-small {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =============================================================
   9. Navigation (Header)
   -------------------------------------------------------------
   Design: weisse Top-Bar (13 px), darunter transparente Nav-Zeile
   ueber dem Hero mit mittigem rotem Logo-Signet (140 x 127).
   Overlay-Zustand wird per :root-Variablen aus dem Snippet
   `header-overlay` gesetzt (nie ueber Section-Nachbarschaft!).
   ============================================================= */
.section_navbar {
  position: var(--header-position, relative);
  top: var(--header-top, auto);
  left: var(--header-inset, auto);
  right: var(--header-inset, auto);
  z-index: 900;
  width: 100%;
  /* Platzhalter: die Nav selbst ist fixed, ohne Hero-Overlay haelt dieser
     Wrapper ihre Hoehe im Fluss (--nav-height misst das Header-Script) */
  height: var(--nav-height, 6.625rem);
}

/* Nav ist immer sichtbar — kein Wechsel absolute/fixed beim Scrollen */
.nav_component {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  --nav-main-bg: var(--header-bg, var(--color--white));
  --nav-main-fg: var(--header-fg, var(--color--dark));
}

/* --- Top-Bar --- */
.nav_topbar {
  background-color: var(--color--white);
  color: var(--color--dark);
  border-bottom: 0.0625rem solid var(--border-color--primary);
}

.nav_topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--24);
  min-height: 3.9375rem;
  padding: var(--space--8) var(--space--80);
}

.nav_topbar-announcement,
.nav_topbar-link,
.nav_topbar .li-lang_dd-toggle {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link-small);
  color: var(--color--dark);
}

.nav_topbar-announcement {
  text-align: left;
}
@media (hover: hover) {
  .nav_topbar-link:hover {
    color: var(--color--red);
  }
}

.nav_topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space--16);
  flex: none;
}

.nav_topbar-item {
  display: flex;
  align-items: center;
  padding-left: var(--space--16);
  border-left: 0.0625rem solid var(--border-color--primary);
}

.nav_topbar-item:first-child {
  border-left: 0;
  padding-left: 0;
}

.nav_topbar-divider {
  width: 0.0625rem;
  height: 2.125rem;
  background-color: var(--border-color--primary);
}

/* --- Haupt-Navigation --- */
.nav_main {
  background-color: var(--nav-main-bg);
  color: var(--nav-main-fg);
  transition: background-color var(--transition--base), color var(--transition--base);
}

.nav_container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--24);
  padding: 0.6875rem var(--space--80);
  min-height: 4.5rem;
}

/* Logo-Signet: rotes Rechteck, ragt ueber die Top-Bar */
.nav_logo-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(-1 * var(--nav--topbar-height));
  width: 8.75rem;
  height: 7.9375rem;
  background-color: var(--color--brand-red);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space--16);
  z-index: 2;
}

/* Logo bleibt auch gescrollt 140x127 und ragt unter der Nav heraus */
.nav_topbar[hidden] + .nav_main .nav_logo-link {
  top: 0;
  height: 100%;
}

.nav_logo-img {
  max-width: 100%;
  max-height: 4.5rem;
  width: auto;
  object-fit: contain;
}

.nav_logo-text {
  font-family: var(--font--script);
  font-size: 1.625rem;
  line-height: 1.1;
  color: var(--color--white);
  text-align: center;
}

/* --- Menue-Zeilen --- */
.nav_menu {
  display: flex;
  align-items: center;
  gap: 1.125rem;
}

.nav_menu.is-left {
  flex: 1;
  justify-content: flex-start;
}
.nav_menu.is-right {
  justify-content: flex-end;
}

.nav_right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space--32);
  flex: 1;
}

.nav_menu-dropdown {
  position: static;
}

.nav_dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--space--4);
  cursor: pointer;
  padding: var(--space--8) 0;
}

.nav_link {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  color: inherit;
  white-space: nowrap;
}

@media (hover: hover) {
  .nav_dropdown-toggle:hover .nav_link { opacity: 0.75;
  }
}

.dropdown-icon {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  transition: transform var(--transition--fast);
}

.nav_menu-dropdown.is-open .dropdown-icon {
  transform: rotate(180deg);
}

/* --- Mega-Panel --- */
.nav_dropdown-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background-color: var(--color--grey);
  color: var(--color--dark);
  box-shadow: var(--shadow--md);
  border-top: 0.0625rem solid var(--border-color--primary);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition--base), visibility var(--transition--base);
  max-height: min(34rem, calc(100vh - 10rem));
  overflow-y: auto;
  z-index: 20;
}

.nav_menu-dropdown.is-open .nav_dropdown-list {
  opacity: 1;
  visibility: visible;
}

.nav_mega {
  display: grid;
  grid-template-columns: 18.75rem minmax(0, 1fr);
  gap: var(--space--80);
  align-items: start;
}

/* Kategorie-Schiene: weisser Grund bis zum linken Viewport-Rand (Figma 11200-17880) */
.nav_mega-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 3.5rem 3.5rem 4rem 0;
  min-height: 100%;
}

.nav_mega-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  background-color: var(--color--white);
  z-index: -1;
}

.nav_mega-rail-title {
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.3;
  color: var(--text-color--secondary);
  margin-bottom: var(--space--12);
}

.nav_mega-rail-group {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: var(--space--32);
}

/* Zweite Gruppe nur, wenn es Punkte ohne Unterebene gibt */
.nav_mega-rail-group:not(:has(.nav_mega-rail-item)) {
  display: none;
}

.nav_mega-rail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--12);
  margin-left: calc(-1 * var(--space--20));
  padding: 0.6875rem var(--space--20);
  border-radius: var(--radius--pill);
  font-size: 1rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.26;
  letter-spacing: var(--tracking--heading);
  color: var(--color--dark);
  transition: background-color var(--transition--fast);
}

.nav_mega-rail-item.is-active .nav_mega-rail-link {
  background-color: var(--color--grey);
  color: var(--color--dark);
}
@media (hover: hover) {
  .nav_mega-rail-link:hover {
    background-color: var(--color--grey);
    color: var(--color--dark);
  }
}

.nav_mega-rail-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  opacity: 0.5;
}

.nav_mega-rail-item.is-active .nav_mega-rail-icon {
  opacity: 1;
}

/* Panels mit Produktkacheln */
.nav_mega-panels {
  position: relative;
  min-width: 0;
  padding: 5.625rem 0 4rem;
}
.nav_mega-panel {
  display: none;
}
.nav_mega-panel.is-active {
  display: block;
}

.nav_mega-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 6.25rem;
}

.nav_mega-tile-link {
  display: flex;
  align-items: center;
  gap: var(--space--20);
  padding: 0.5625rem var(--space--16);
  border-radius: var(--radius--medium);
  transition: background-color var(--transition--fast);
}

.nav_mega-tile-link:focus-visible {
  background-color: var(--color--white);
}
@media (hover: hover) {
  .nav_mega-tile-link:hover {
    background-color: var(--color--white);
  }
}

.nav_mega-tile-media {
  width: 5rem;
  height: 5rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav_mega-tile-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav_mega-tile-label,
.nav_mega-card-label {
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
  color: var(--color--dark);
}

.nav_mega-empty {
  padding: 0.5625rem 0;
}

.nav_mega-empty-title {
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  color: var(--color--dark);
}

.nav_mega-more {
  display: block;
  margin-top: var(--space--32);
  padding: 0.8125rem var(--space--16);
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color--dark);
  transition: color var(--transition--fast), border-color var(--transition--fast);
}

@media (hover: hover) {
  .nav_mega-more:hover {
    color: var(--color--red);
  }
}

/* Bildkachel-Raster fuer Menues ohne dritte Ebene (Figma 11200-18103) */
.nav_mega-grid {
  column-count: 3;
  column-gap: 6rem;
  padding: 5.5rem 0 2.5rem;
}

.nav_mega-card {
  break-inside: avoid;
  margin-bottom: 2.5rem;
}

.nav_mega-card-link {
  display: flex;
  align-items: center;
  gap: var(--space--20);
  padding: 0.25rem;
  padding-right: var(--space--16);
  border-radius: var(--radius--medium);
  transition: background-color var(--transition--fast);
}

.nav_mega-card-link:focus-visible {
  background-color: var(--color--white);
}
@media (hover: hover) {
  .nav_mega-card-link:hover {
    background-color: var(--color--white);
  }
}

.nav_mega-card-media {
  width: 6.25rem;
  height: 6.25rem;
  flex: none;
  border-radius: var(--radius--small);
  overflow: hidden;
  background-color: var(--color--white);
}

.nav_mega-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav_mega-card-label {
  flex: 1;
}

.nav_mega-card-external {
  display: flex;
  flex: none;
  font-size: 1rem;
  color: var(--color--red);
}

@media (max-width: 1199px) {
  .nav_mega {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space--40);
  }
  .nav_mega-rail {
    padding-right: var(--space--32);
  }
  .nav_mega-tiles {
    gap: var(--space--20) var(--space--32);
  }
  .nav_mega-grid {
    column-count: 2;
    column-gap: var(--space--40);
  }
  .nav_mega-card {
    margin-bottom: var(--space--24);
  }
}

/* --- Shop-Icons --- */
.nav_shop-icons {
  display: flex;
  align-items: center;
  gap: var(--space--12);
}

.nav_shop-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: inherit;
  cursor: pointer;
  transition: opacity var(--transition--fast);
}

@media (hover: hover) {
  .nav_shop-icon:hover {
    opacity: 0.7;
  }
}

.nav_shop-icon .icon-svg,
.nav_shop-icon .icon-embed-xsmall {
  width: 1.25rem;
  height: 1.25rem;
}

.nav_shop-quantity {
  position: absolute;
  top: -0.25rem;
  right: -0.375rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--brand-red);
  color: var(--color--white);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1rem;
  text-align: center;
}

.nav_search-holder,
.nav_cart-holder,
.nav_account { display: flex; }

/* --- Dropdown-Panels (Suche / Mini-Cart) --- */
.nav_dropdown {
  position: static;
}

.nav_predictive-search-holder,
.nav_mini-cart-holder {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(30rem, 100vw);
  background-color: var(--color--white);
  color: var(--color--dark);
  box-shadow: var(--shadow--lg);
  transform: translateX(100%);
  transition: transform var(--transition--base);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.nav_dropdown.is-open .nav_predictive-search-holder,
.nav_dropdown.is-open .nav_mini-cart-holder { transform: translateX(0); }

.nav_predictive-search-close,
.nav_mini-cart-close {
  position: fixed;
  inset: 0;
  background-color: rgba(35, 46, 32, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition--base), visibility var(--transition--base);
  z-index: -1;
}

.nav_dropdown.is-open .nav_predictive-search-close,
.nav_dropdown.is-open .nav_mini-cart-close { opacity: 1; visibility: visible; }

.nav_dropdown-close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius--pill);
  color: var(--color--dark);
  transition: background-color var(--transition--fast);
}

@media (hover: hover) {
  .nav_dropdown-close-button:hover {
    background-color: var(--color--grey);
  }
}
.nav_dropdown-close-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* --- Burger --- */
.nav_menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  cursor: pointer;
  color: inherit;
}

.menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3125rem;
  width: 1.375rem;
}

.menu-icon_line-top,
.menu-icon_line-middle-inner,
.menu-icon_line-bottom {
  height: 0.125rem;
  width: 100%;
  background-color: currentColor;
  transition: transform var(--transition--base), opacity var(--transition--fast);
}

.nav_menu-button.is-open .menu-icon_line-top {
  transform: translateY(0.4375rem) rotate(45deg);
}
.nav_menu-button.is-open .menu-icon_line-middle {
  opacity: 0;
}
.nav_menu-button.is-open .menu-icon_line-bottom {
  transform: translateY(-0.4375rem) rotate(-45deg);
}

/* --- Mobile-Drawer --- */
.nav_drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(24rem, 92vw);
  background-color: var(--color--white);
  color: var(--color--dark);
  box-shadow: var(--shadow--lg);
  transform: translateX(-100%);
  transition: transform var(--transition--base);
  z-index: 1000;
  display: none;
}

.nav_drawer.is-open {
  transform: translateX(0);
}

.nav_drawer-scroll {
  width: 100%;
  overflow-y: auto;
  padding: var(--space--80) var(--space--24) var(--space--40);
}

.nav_drawer-group {
  border-bottom: 0.0625rem solid var(--border-color--primary);
}

.nav_drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
  padding: var(--space--16) 0;
  cursor: pointer;
}

.nav_drawer-link {
  font-size: 1.125rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}

.nav_drawer-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform var(--transition--base);
}

.nav_drawer-group.is-open .nav_drawer-icon {
  transform: rotate(180deg);
}

.nav_drawer-sub {
  display: none;
  flex-direction: column;
  gap: var(--space--8);
  padding: 0 0 var(--space--16) var(--space--12);
}

.nav_drawer-group.is-open .nav_drawer-sub {
  display: flex;
}

.nav_drawer-sublink {
  font-size: 0.9375rem;
  color: var(--text-color--secondary);
}
@media (hover: hover) {
  .nav_drawer-sublink:hover {
    color: var(--color--red);
  }
}

.nav_drawer-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--16);
  padding-top: var(--space--24);
}

.nav_drawer-meta-link {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking--link-small);
  color: var(--text-color--secondary);
}

/* --- Gescrollt / Menue offen: weisse Nav ---
   Gilt auch ueber dem Hero, sobald ein Mega-Menue oder das Mobile-Menue offen ist. */
.section_navbar.is-stuck .nav_component,
.nav_component:has(.nav_menu-dropdown.is-open .nav_dropdown-list),
.nav_component.is-dropdown-open,
.nav_component.is-menu-open {
  --nav-main-bg: var(--color--white);
  --nav-main-fg: var(--color--dark);
}

.section_navbar.is-stuck .nav_main {
  box-shadow: var(--shadow--sm);
}

/* --- Icon-Snippet-Basis ---
   Der Converter ersetzt das li-snippet-Element vollstaendig UND entfernt den
   Wrapper aus dem Snippet — uebrig bleibt das nackte <svg>. Groessen duerfen
   deshalb nie am Wrapper haengen, sondern nur am <svg> selbst oder am Elternteil. */
.icon-svg,
svg.icon-svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: middle;
  line-height: 0;
}

/* --- Responsive --- */
@media (max-width: 1199px) {
  .nav_topbar-inner {
    padding-left: var(--space--40);
    padding-right: var(--space--40);
  }
  .nav_container {
    padding-left: var(--space--40);
    padding-right: var(--space--40);
  }
  .nav_menu {
    gap: var(--space--12);
  }
  .nav_right {
    gap: var(--space--20);
  }
}

@media (max-width: 991px) {
  .nav_menu {
    display: none;
  }
  .nav_menu-button {
    display: flex;
  }
  .nav_drawer {
    display: block;
  }
  .nav_topbar-announcement {
    font-size: 0.75rem;
  }
  .nav_container {
    justify-content: space-between;
    padding-top: var(--space--12);
    padding-bottom: var(--space--12);
  }
  .nav_logo-link {
    position: static;
    transform: none;
    width: 5rem;
    height: 3.5rem;
    padding: var(--space--8);
    order: 2;
  }
  .nav_right {
    flex: 0;
    order: 3;
  }
  .nav_menu-button {
    order: 1;
  }
  .nav_logo-img {
    max-height: 2.5rem;
  }
}

@media (max-width: 767px) {
  .nav_topbar-inner {
    padding-left: var(--space--20);
    padding-right: var(--space--20);
    min-height: 2.75rem;
  }
  .nav_topbar-right .nav_topbar-item {
    display: none;
  }
  .nav_topbar-divider {
    display: none;
  }
  .nav_container {
    padding-left: var(--space--20);
    padding-right: var(--space--20);
  }
  .nav_shop-icons {
    gap: var(--space--12);
  }
}

/* =============================================================
   10. Predictive Search (Drawer-Inhalt)
   ============================================================= */
.predictive-search_component {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 27rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--color--white);
  border-left: 0.0625rem solid var(--border-color--primary);
  box-shadow: var(--shadow--lg);
  padding: 1.5rem;
  overflow: hidden;
}

.predictive-search_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.predictive-search_holder {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.predictive-search_form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.predictive-search_form-component {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.predictive-search_input-holder {
  position: relative;
  display: flex;
  align-items: center;
  border: 0.0625rem solid var(--border-color--strong);
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  box-shadow: var(--shadow--xs);
  transition: border-color var(--transition--fast), box-shadow var(--transition--fast);
}

.predictive-search_input-holder:focus-within {
  border-color: var(--color--ink);
  box-shadow: 0 0 0 0.1875rem rgba(55, 53, 47, 0.08);
}

.predictive-search_input {
  flex: 1;
  border: 0;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  background: transparent;
}

.predictive-search_input:focus {
  outline: none;
}

.predictive-search_search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.5rem;
  flex: none;
  color: var(--color--neutral);
}

@media (hover: hover) {
  .predictive-search_search-button:hover {
    color: var(--color--ink);
  }
}

.predictive-search_overflow {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: 1.25rem;
}

.predictive-search_topic {
  margin-bottom: 1.5rem;
}

.predictive-search_headline {
  margin-bottom: 0.375rem;
  font-size: 0.78125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.predictive-search_list {
  display: flex;
  flex-direction: column;
}

.predictive-search_item {
  border-bottom: 0.0625rem solid var(--border-color--primary);
}

.predictive-search_item:last-child {
  border-bottom: 0;
}

.predictive-search_link {
  display: block;
  padding: 0.5rem 0.25rem;
  border-radius: var(--radius--small);
  transition: background-color var(--transition--fast);
}

@media (hover: hover) {
  .predictive-search_link:hover {
    background-color: var(--color--paper);
  }
}

.predictive-search_product-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.predictive-search_line-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem;
  margin: 0 -0.375rem;
  border-radius: var(--radius--medium);
  transition: background-color var(--transition--fast);
}

@media (hover: hover) {
  .predictive-search_line-item:hover {
    background-color: var(--color--paper);
  }
}

.predictive-search_image-wrapper {
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--medium);
  overflow: hidden;
  background-color: var(--background-color--secondary);
}

.predictive-search_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.predictive-search_product-info {
  min-width: 0;
}

/* =============================================================
   11. Mini-Cart (Drawer-Inhalt)
   ============================================================= */
.mini-cart_component {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 26rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--color--white);
  border-left: 0.0625rem solid var(--border-color--primary);
  box-shadow: var(--shadow--lg);
  overflow: hidden;
}

.mini-cart_full,
.mini-cart_empty {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 1.5rem;
}

.mini-cart_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.mini-cart_line-item {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.mini-cart_line-item_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mini-cart_line-item_item {
  display: flex;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 0.0625rem solid var(--border-color--primary);
}

.mini-cart_line-item_img {
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
  object-fit: cover;
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--medium);
  background-color: var(--background-color--secondary);
}

.mini-cart_line-item_product-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
}

.mini-cart_line-item_price {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.mini-cart_line-item_quantity {
  display: inline-flex;
  align-items: center;
  border: 0.0625rem solid var(--border-color--strong);
  border-radius: var(--radius--small);
  overflow: hidden;
}

.mini-cart_line-item_quantity-adjust {
  width: 1.875rem;
  height: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0;
  background: transparent;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color var(--transition--fast);
}

@media (hover: hover) {
  a.mini-cart_line-item_quantity-adjust:hover {
    background-color: var(--color--paper);
  }
}

input.mini-cart_line-item_quantity-adjust {
  width: 2.25rem;
  cursor: auto;
  border-left: 0.0625rem solid var(--border-color--strong);
  border-right: 0.0625rem solid var(--border-color--strong);
  border-radius: 0;
  padding: 0;
  -moz-appearance: textfield;
}

input.mini-cart_line-item_quantity-adjust::-webkit-outer-spin-button,
input.mini-cart_line-item_quantity-adjust::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mini-cart_footer {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-top: 1.25rem;
  border-top: 0.0625rem solid var(--border-color--primary);
}

.mini-cart_footer-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.mini-cart_footer-price {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.mini-cart_footer-message {
  padding: 0.75rem 1rem;
  border-radius: var(--radius--medium);
  background-color: var(--background-color--secondary);
}

.mini-cart_footer-message-item {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.mini-cart_conditional {
  display: contents;
}

.mini-cart_empty-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color--secondary);
}

/* =============================================================
   12. Footer & Sprach-Picker
   ============================================================= */
.section_footer {
  background-color: var(--color--white);
}

/* --- Social-Zeile --- */
.footer_social-row {
  padding: var(--space--32) var(--space--80);
  background-color: var(--color--white);
  border-bottom: 0.0625rem solid var(--border-color--primary);
}

.footer_social-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--24);
  flex-wrap: wrap;
}

.footer_social-heading {
  font-size: 1.125rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}

.footer_social-list {
  display: flex;
  align-items: center;
  gap: var(--space--12);
}

.footer_social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--dark);
  color: var(--color--white);
  transition: background-color var(--transition--fast), transform var(--transition--fast);
}

@media (hover: hover) {
  .footer_social-link:hover {
    background-color: var(--color--red);
    transform: translateY(-0.125rem);
  }
}
.footer_social-icon {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
}

/* --- Link-Spalten --- */
.footer_link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space--40) var(--space--32);
  padding: var(--space--64) 0;
}

.footer_link-column {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
}

.footer_column-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking--link);
  color: var(--text-color--secondary);
}

.footer_link-list {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
}

.footer_link {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color--dark);
  transition: color var(--transition--fast);
}

@media (hover: hover) {
  .footer_link:hover {
    color: var(--color--red);
  }
}

/* Der graue Bereich hinter den Spalten */
.section_footer .footer_link-grid {
  position: relative;
}

.footer_columns-bg {
  background-color: var(--color--grey);
  padding-left: var(--space--80);
  padding-right: var(--space--80);
}

/* --- Legal-Zeile --- */
.footer_legal-row {
  padding: var(--space--24) var(--space--80);
  background-color: var(--color--grey);
  border-top: 0.0625rem solid rgba(35, 46, 32, 0.08);
}

.footer_legal-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
  flex-wrap: wrap;
}

.footer_legal-right {
  display: flex;
  align-items: center;
  gap: var(--space--20);
  flex-wrap: wrap;
}

.footer_copyright,
.footer_legal-link {
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: var(--tracking--link-small);
  color: var(--text-color--secondary);
}

@media (hover: hover) {
  .footer_legal-link:hover {
    color: var(--color--red);
  }
}

.footer_payment-row {
  margin-top: var(--space--16);
}

.footer_payment-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--8);
  list-style: none;
}

.footer_payment-icon,
.footer_payment-svg svg { height: 1.5rem; width: auto; }

/* --- Sprach-Picker --- */
.li-lang_wrapper {
  position: relative;
}

.li-lang_dropdown {
  position: relative;
}

.li-lang_dd-toggle {
  display: flex;
  align-items: center;
  gap: var(--space--8);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking--link-small);
  color: inherit;
}

.li-lang_dd-toggle-icon {
  width: 0.625rem;
  height: 0.625rem;
  transition: transform var(--transition--fast);
}

.li-lang_dropdown.is-open .li-lang_dd-toggle-icon {
  transform: rotate(180deg);
}

.li-lang_dd-list {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 8rem;
  background-color: var(--color--white);
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--small);
  box-shadow: var(--shadow--sm);
  padding: var(--space--8);
  display: none;
  z-index: 30;
}

.li-lang_dd-list.is-up {
  top: auto;
  bottom: calc(100% + 0.5rem);
}
.li-lang_dropdown.is-open .li-lang_dd-list {
  display: block;
}

.li-lang_dd-link {
  display: block;
  padding: var(--space--8) var(--space--12);
  font-size: 0.8125rem;
  color: var(--color--dark);
  border-radius: var(--radius--small);
}

@media (hover: hover) {
  .li-lang_dd-link:hover {
    background-color: var(--color--grey);
  }
}
.li-lang_hidden-input, .li-lang_script { display: none; }

@media (max-width: 991px) {
  .footer_social-row,
  .footer_legal-row { padding-left: var(--space--40); padding-right: var(--space--40); }
  .footer_link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer_columns-bg {
    padding-left: var(--space--40);
    padding-right: var(--space--40);
  }
}

@media (max-width: 767px) {
  .footer_social-row,
  .footer_legal-row { padding-left: var(--space--20); padding-right: var(--space--20); }
  .footer_columns-bg {
    padding-left: var(--space--20);
    padding-right: var(--space--20);
  }
  .footer_link-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space--32);
    padding: var(--space--40) 0;
  }
  .footer_social-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer_legal-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =============================================================
   13. Hero / Content-Header
   -------------------------------------------------------------
   Hero-Sections mit Bild werden als eingerücktes, abgerundetes
   Panel gerendert ("Canvas-Karte") — Sections ohne Bild bleiben
   ruhige, zentrierte Text-Header.
   ============================================================= */
.header_background-image-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.header_background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header_overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(200deg, rgba(31, 28, 24, 0.1) 0%, rgba(31, 28, 24, 0.55) 85%);
}

/* Inset-Karte für alle Bild-Heroes */
.section_header-home,
.section_content-header:has(.header_background-image-wrapper),
.section_small-hero:has(.header_background-image-wrapper) {
  position: relative;
  width: min(var(--container--large), 100% - 3rem);
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.25rem;
  border-radius: var(--radius--xlarge);
  overflow: hidden;
  box-shadow: var(--shadow--sm);
}

.section_header-home {
  display: flex;
  align-items: flex-end;
  min-height: 72vh;
  padding-top: 8rem;
  padding-bottom: 3.5rem;
}

.section_header-home .padding-global {
  position: relative;
  z-index: 2;
  width: 100%;
}

.header_card {
  max-width: 34rem;
}

/* Kleine Hero-Varianten */
.section_small-hero,
.section_content-header {
  position: relative;
}

.section_small-hero .padding-global,
.section_content-header .padding-global {
  position: relative;
  z-index: 2;
}

.section_content-header {
  display: flex;
  align-items: flex-end;
  min-height: 42vh;
}

@media (max-width: 767px) {
  .section_header-home,
  .section_content-header:has(.header_background-image-wrapper),
  .section_small-hero:has(.header_background-image-wrapper) {
    width: calc(100% - 1.5rem);
    margin-top: 0.75rem;
  }
  .section_header-home {
    min-height: 60vh;
    padding-top: 6rem;
    padding-bottom: 2rem;
  }
}

/* =============================================================
   14. Produkt-Karte (product-item_)
   ============================================================= */
.product-item_component {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-item_image-link {
  position: relative;
}

.product-item_image-wrapper {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--large);
  background-color: var(--background-color--secondary);
  box-shadow: var(--shadow--xs);
  transition: box-shadow var(--transition--base), border-color var(--transition--base),
    transform var(--transition--base);
}

@media (hover: hover) {
  .product-item_image-link:hover .product-item_image-wrapper {
    border-color: var(--border-color--strong);
    box-shadow: var(--shadow--md);
  }
}

.product-item_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition--base);
}

@media (hover: hover) {
  .product-item_image-wrapper:hover .product-item_image {
    transform: scale(1.025);
  }
}

.product-item_tag_list {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  gap: 0.375rem;
  z-index: 1;
}

.product-item_tag {
  padding: 0.1875rem 0.625rem;
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(0.375rem);
  backdrop-filter: blur(0.375rem);
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: 62.4375rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.product-item_tag.is-red {
  background-color: var(--color--ink);
  border-color: var(--color--ink);
  color: var(--color--white);
}

.product-item_text-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.product-item_left {
  min-width: 0;
}

.product-item_left .text-size-small {
  color: var(--text-color--secondary);
}

.product-item_price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: none;
}

.product-item_form-wrapper {
  display: flex;
  flex-direction: column;
}

/* =============================================================
   15. Produkt-Listen & Featured Sections
   ============================================================= */
.product_component {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.product_heading-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.product_list-wrapper {
  width: 100%;
}

.product_list {
  display: grid;
  grid-template-columns: repeat(var(--product-columns, 4), 1fr);
  gap: 1.5rem;
}

.product_list-item {
  display: flex;
  flex-direction: column;
}

@media (max-width: 991px) {
  .product_list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .product_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 479px) {
  .product_list {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   16. Collections (Featured + List)
   ============================================================= */
.more_component {
  width: 100%;
}

.more_liste,
.more_list-wrapper {
  width: 100%;
}

.more_liste {
  display: grid;
  grid-template-columns: repeat(var(--collection-columns, 3), 1fr);
  gap: 1.5rem;
}

.more_item {
  display: flex;
}

.more_image-link {
  display: block;
  width: 100%;
}

.more_image-wrapper,
.collections_item {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--large);
  box-shadow: var(--shadow--xs);
  transition: box-shadow var(--transition--base), transform var(--transition--base);
}

@media (hover: hover) {
  .more_image-link:hover .more_image-wrapper,
  .collections_item:hover {
    box-shadow: var(--shadow--md);
    transform: translateY(-0.125rem);
  }
}

.more_image,
.collections_bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition--base);
}

@media (hover: hover) {
  .more_image-link:hover .more_image,
  .collections_item:hover .collections_bg-image {
    transform: scale(1.025);
  }
}

.more_overlay,
.collections_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 28, 24, 0) 45%, rgba(31, 28, 24, 0.55) 100%);
}

.more_image-wrapper .heading-style-h3 {
  padding: 1.25rem;
}

.collections_title {
  position: relative;
  z-index: 1;
  padding: 1.25rem;
}

.collections_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.collections_list-item {
  display: flex;
  flex-direction: column;
}

@media (max-width: 767px) {
  .more_liste,
  .collections_grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* =============================================================
   17. Blog
   ============================================================= */
.blog_component {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
}

.blog_featured-item {
  display: flex;
}

.blog_featured-image-link {
  display: flex;
  width: 100%;
}

.blog_featured-image-wrapper {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 24rem;
  overflow: hidden;
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--large);
  box-shadow: var(--shadow--xs);
  transition: box-shadow var(--transition--base), transform var(--transition--base);
}

@media (hover: hover) {
  .blog_featured-image-wrapper:hover {
    box-shadow: var(--shadow--md);
    transform: translateY(-0.125rem);
  }
}

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

.blog_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 28, 24, 0) 35%, rgba(31, 28, 24, 0.6) 100%);
}

.blog_titel-wrapper {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
  color: var(--color--white);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.blog_two-articles {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.blog_featured-item-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.blog_featured-title-link {
  display: block;
  margin-bottom: 0.5rem;
  transition: color var(--transition--fast);
}

@media (hover: hover) {
  .blog_featured-title-link:hover {
    color: var(--color--neutral);
  }
}

/* Blog-Liste */
.blog_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.blog_cms-item,
.blog_list-item {
  display: flex;
  flex-direction: column;
}

.blog_item-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (hover: hover) {
  .blog_item-grid:hover .blog_img {
    transform: scale(1.025);
  }
}

@media (hover: hover) {
  .blog_item-grid:hover .blog_tags-wrapper {
    border-color: var(--border-color--strong);
    box-shadow: var(--shadow--md);
    transform: translateY(-0.125rem);
  }
}

.blog_tags-wrapper {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--large);
  background-color: var(--background-color--secondary);
  box-shadow: var(--shadow--xs);
  transition: box-shadow var(--transition--base), border-color var(--transition--base),
    transform var(--transition--base);
}

.blog_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition--base);
}

.blog_tag-row {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.blog_tag {
  padding: 0.1875rem 0.625rem;
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(0.375rem);
  backdrop-filter: blur(0.375rem);
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: 62.4375rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.blog_info-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.blog_cms-empty {
  padding: 2.5rem;
  text-align: center;
  border: 0.0625rem dashed var(--border-color--strong);
  border-radius: var(--radius--large);
  color: var(--text-color--secondary);
}

.section_article .article_wrapper {
  max-width: var(--container--small);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 991px) {
  .blog_component {
    grid-template-columns: 1fr;
  }
  .blog_list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .blog_list {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   18. Pagination
   ============================================================= */
.pagination_component {
  display: flex;
  justify-content: center;
  padding-top: 3rem;
}

.pagination_list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

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

.pagination_count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4rem;
  border-radius: var(--radius--small);
  transition: background-color var(--transition--fast);
}

@media (hover: hover) {
  .pagination_count:hover {
    background-color: var(--color--paper-hover);
  }
}

.pagination_arrow {
  width: 0.75rem;
  height: 0.75rem;
  transform: rotate(90deg);
}

.pagination_arrow.is-right {
  transform: rotate(-90deg);
}

/* =============================================================
   19. Filter (Collection Products / Search)
   ============================================================= */
.filters_top {
  width: 100%;
}

.filter_headline {
  text-align: center;
}

.filter_layout {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 3rem;
  align-items: start;
}

.filter_filters-wrapper {
  position: sticky;
  top: calc(var(--nav--height) + 1rem);
}

.filter_form_component {
  display: flex;
  flex-direction: column;
}

.filter_form {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.filter_form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.filter_heading {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: var(--tracking--tight);
}

.filter_results-wrapper {
  color: var(--text-color--secondary);
  font-size: 0.875rem;
}

.filter_form-field-wrapper {
  display: flex;
  flex-direction: column;
}

.filter_scroll-wrapper {
  max-height: 60vh;
  overflow-y: auto;
}

.filter_filter-group-list {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.filter_filter-group-heading {
  margin-bottom: 0.5rem;
}

.filter_filter-group-heading .text-size-medium {
  font-size: 0.78125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-color--secondary);
}

.filter_list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.filter_item {
  display: flex;
}

.filter_form_checkbox {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.3125rem 0.375rem;
  margin: 0 -0.375rem;
  border-radius: var(--radius--small);
  cursor: pointer;
  transition: background-color var(--transition--fast);
}

@media (hover: hover) {
  .filter_form_checkbox:hover {
    background-color: var(--color--paper);
  }
}

.filter_form_checkbox.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.filter_form_checkbox-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  border: 0.0625rem solid var(--border-color--strong);
  border-radius: var(--radius--small);
  background-color: var(--color--white);
  transition: border-color var(--transition--fast), background-color var(--transition--fast);
}

.filter_form_checkbox-icon.is-checked {
  border-color: var(--color--ink);
  background-color: var(--color--ink);
  background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.5 12L13 4.5' stroke='white' stroke-width='2'/%3E%3C/svg%3E);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 0.7rem;
}

.filter_form_checkbox-label {
  font-size: 0.875rem;
}

.filter_tablet-modal-close-button {
  display: none;
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius--small);
}

@media (hover: hover) {
  .filter_tablet-modal-close-button:hover {
    background-color: var(--color--paper-hover);
  }
}

.filter_tablet-filters-button {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 0.0625rem solid var(--border-color--strong);
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  box-shadow: var(--shadow--xs);
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
  cursor: pointer;
  transition: border-color var(--transition--fast);
}

@media (hover: hover) {
  .filter_tablet-filters-button:hover {
    border-color: var(--color--neutral-light);
  }
}

.filter_feed {
  min-width: 0;
}

.filter_feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.filter_tags-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter_tags-inner-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter_tag {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  background-color: var(--color--white);
  border: 0.0625rem solid var(--border-color--strong);
  border-radius: 62.4375rem;
  font-size: 0.875rem;
  box-shadow: var(--shadow--xs);
}

.filter_close {
  display: flex;
  align-items: center;
  color: var(--color--neutral);
  transition: color var(--transition--fast);
}

@media (hover: hover) {
  .filter_close:hover {
    color: var(--color--ink);
  }
}

.filter_close-icon {
  width: 1rem;
  height: 1rem;
}

.filter_product-list-wrapper {
  width: 100%;
}

.filter_product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.filter_product-list-item {
  display: flex;
  flex-direction: column;
}

.filter_empty {
  padding: 3rem 2rem;
  text-align: center;
  border: 0.0625rem dashed var(--border-color--strong);
  border-radius: var(--radius--large);
  color: var(--text-color--secondary);
}

@media (max-width: 991px) {
  .filter_layout {
    grid-template-columns: 1fr;
  }
  .filter_filters-wrapper {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    background-color: var(--color--white);
    padding: 3.5rem 1.5rem 1.5rem;
    overflow-y: auto;
  }
  .filter_filters-wrapper.is-open {
    display: block;
  }
  .filter_scroll-wrapper {
    max-height: none;
  }
  .filter_tablet-modal-close-button {
    display: flex;
  }
  .filter_tablet-filters-button {
    display: inline-flex;
  }
}

@media (max-width: 767px) {
  .filter_product-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 479px) {
  .filter_product-list {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   20. Produktseite (product-header_)
   ============================================================= */
.product-header_component {
  width: 100%;
}

.product-header_layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

.swiper-container.is-product-gallery {
  min-width: 0;
  position: sticky;
  top: calc(var(--nav--height) + 1rem);
}

.swiper.is-product-gallery {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius--xlarge);
}

.swiper.is-product-gallery .swiper-slide {
  width: 100%;
}

.product-header_gallery-lightbox {
  display: block;
  aspect-ratio: 3 / 4;
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--xlarge);
  overflow: hidden;
  background-color: var(--background-color--secondary);
}

.product-header_gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-header_gallery-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-header_slider-wrapper {
  position: relative;
  margin-top: 0.75rem;
}

.swiper.is-product-thumbnail {
  overflow: hidden;
}

.swiper-slide.is-product-thumbnail {
  position: relative;
  width: 4.5rem;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--transition--fast);
}

@media (hover: hover) {
  .swiper-slide.is-product-thumbnail:hover {
    opacity: 0.85;
  }
}

.swiper-slide.is-product-thumbnail.is-active {
  opacity: 1;
}

.product-header_thumbnail-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--medium);
  background-color: var(--background-color--secondary);
}

.product-header_play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: auto;
  color: var(--color--white);
  background-color: rgba(31, 28, 24, 0.55);
  border-radius: 62.4375rem;
  padding: 0.4rem;
}

.product-header_product-details {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.product-header_product-details > div:first-child .text-size-regular {
  font-size: 0.78125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-color--secondary);
}

.product-header_price-wrapper {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.product-header_tag-list {
  display: flex;
  gap: 0.375rem;
}

.product-header_shipping-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--medium);
  background-color: var(--background-color--secondary);
}

.product-header_shipping {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.product-header_shipping-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

.product-header_default-state {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-header_option-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-header_option {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product-header_option > div:first-child {
  font-size: 0.875rem;
  font-weight: 500;
}

.product-header_radio-list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.product-header_radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 1rem;
  border: 0.0625rem solid var(--border-color--strong);
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  box-shadow: var(--shadow--xs);
  cursor: pointer;
  transition: border-color var(--transition--fast), background-color var(--transition--fast),
    color var(--transition--fast);
}

@media (hover: hover) {
  .product-header_radio:hover {
    border-color: var(--color--neutral-light);
  }
}

.product-header_radio:has(input:checked) {
  border-color: var(--color--ink);
  background-color: var(--color--ink);
  color: var(--color--white);
}

.product-header_radio-button {
  display: none;
}

.product-header_add-to-cart-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-header_buy-wrappper {
  display: flex;
  gap: 0.75rem;
}

.product-header_buy-wrappper .button {
  flex: 1;
}

.product-header_out-of-stock {
  display: flex;
}

.product-header_out-of-stock .button {
  flex: 1;
}

.product-header_description {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 0.0625rem solid var(--border-color--primary);
}

@media (max-width: 991px) {
  .product-header_layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .swiper-container.is-product-gallery {
    position: static;
  }
}

/* =============================================================
   21. Cart-Seite
   ============================================================= */
.section_account .cart_form-block {
  width: 100%;
}

.cart_grid-wrapper {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2rem;
  align-items: start;
}

.cart_table {
  background-color: var(--background-color--card);
  margin-bottom: 1.5rem;
}

.cart_grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 0.0625rem solid var(--border-color--primary);
}

.cart_grid:last-child {
  border-bottom: 0;
}

.cart_grid.is-header {
  background-color: var(--background-color--secondary);
  border-bottom: 0.0625rem solid var(--border-color--primary);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.cart_grid.is-header .text-size-regular {
  font-size: 0.78125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-color--secondary);
}

.cart_table-header {
  min-width: 0;
}

.cart_image {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  flex: none;
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--medium);
  background-color: var(--background-color--secondary);
}

.cart_info-order {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1rem;
  min-width: 0;
}

.cart_table-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.cart_quantity-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78125rem;
  color: var(--text-color--secondary);
}

.cart_quantity {
  width: 4.5rem;
  padding: 0.375rem 0.625rem;
  border: 0.0625rem solid var(--border-color--strong);
  border-radius: var(--radius--small);
  text-align: center;
}

.cart_price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.cart_wrapper-right {
  display: flex;
  flex-direction: column;
}

.cart_content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart_wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cart_details-wrapper {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.cart_details-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.cart_action {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cart_empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3.5rem 2rem;
  text-align: center;
  border-style: dashed;
}

.cart_price.away {
  display: none;
}

@media (max-width: 991px) {
  .cart_grid-wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 479px) {
  .cart_grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .cart_price-info {
    align-items: flex-start;
  }
}

/* =============================================================
   22. Contact / Password / Gift-Card / Default / Custom Liquid
   ============================================================= */
.contact_component {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}

.contact_content {
  display: flex;
  flex-direction: column;
}

.contact_form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--xlarge);
  background-color: var(--background-color--card);
  box-shadow: var(--shadow--sm);
}

.contact_form .button {
  align-self: flex-start;
}

@media (max-width: 767px) {
  .contact_component {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .contact_form {
    padding: 1.25rem;
  }
}

/* Password-Seite */
.section_under-construction {
  display: flex;
  align-items: center;
  min-height: 100vh;
  background-color: var(--background-color--secondary);
}

.login_tabs.is-password {
  max-width: 26rem;
  margin: 0 auto;
}

.login_form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--xlarge);
  background-color: var(--color--white);
  box-shadow: var(--shadow--md);
}

/* Gift-Card */
.gift_wrapper {
  display: flex;
  justify-content: center;
  padding-top: 2rem;
}

.gift_card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 24rem;
  padding: 2rem;
  border-radius: var(--radius--xlarge);
  background-color: var(--color--ink);
  color: var(--color--white);
  box-shadow: var(--shadow--md);
}

.gift_card-logo {
  height: 2rem;
  width: auto;
  align-self: flex-start;
}

.gift_card-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Default Page / Custom Liquid */
.default_wrapper {
  max-width: var(--container--small);
  margin-left: auto;
  margin-right: auto;
}

.section_custom-liquid {
  width: 100%;
}

/* =============================================================
   23. Swiper-Helfer
   ============================================================= */
/* Fallback vor Swiper-Init (u. a. Builder-Preview): Slides in einer Reihe */
.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  flex-shrink: 0;
}

.swiper {
  overflow: hidden;
}

.swiper_button-wrapper {
  position: absolute;
  inset: auto 0 100% 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 0;
}

.swiper_button-wrapper.is-product-slider {
  position: absolute;
  top: -3.5rem;
  right: 0.75rem;
  left: auto;
  bottom: auto;
  height: auto;
  gap: 0.5rem;
}

.swiper_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  background-color: var(--color--white);
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: 62.4375rem;
  box-shadow: var(--shadow--sm);
  color: var(--color--ink);
  cursor: pointer;
  transition: border-color var(--transition--fast), box-shadow var(--transition--fast);
}

@media (hover: hover) {
  .swiper_button:hover {
    border-color: var(--color--neutral-light);
    box-shadow: var(--shadow--md);
  }
}

.swiper_button-icon {
  width: 1rem;
  height: 1rem;
}

.swiper_button-icon.is-reversed {
  transform: rotate(180deg);
}

.swiper-button-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* =============================================================
   24. P. JENTSCHURA — Section-Framework
   -------------------------------------------------------------
   Jede Section rendert einen inneren Wrapper `.section_inner`, der
   Abstaende und Farbschema traegt. Die Defaults hier spiegeln exakt
   die JSON-Defaults der Sections, damit der Builder ohne Liquid
   genauso aussieht wie die Live-Site.
   ============================================================= */
.section_inner {
  position: relative;
  padding-top: var(--section-pt, 5rem);
  padding-bottom: var(--section-pb, 5rem);
  background-color: var(--section-bg, transparent);
  color: var(--section-fg, inherit);
}

@media (max-width: 767px) {
  .section_inner {
    padding-top: var(--section-pt-m, 3rem);
    padding-bottom: var(--section-pb-m, 3rem);
  }
}

/* --- Farbschemata --- */
.is-theme-white {
  --section-bg: var(--color--white);
  --section-fg: var(--color--dark);
  --section-muted: rgba(35, 46, 32, 0.7);
  --section-border: var(--border-color--primary);
  --section-accent: var(--color--red);
  --section-card-bg: var(--color--grey);
}

.is-theme-grey {
  --section-bg: var(--color--grey);
  --section-fg: var(--color--dark);
  --section-muted: rgba(35, 46, 32, 0.7);
  --section-border: rgba(35, 46, 32, 0.12);
  --section-accent: var(--color--red);
  --section-card-bg: var(--color--white);
}

.is-theme-green {
  --section-bg: var(--color--green);
  --section-fg: var(--color--white);
  --section-muted: rgba(255, 255, 255, 0.78);
  --section-border: rgba(255, 255, 255, 0.24);
  --section-accent: var(--color--white);
  --section-card-bg: rgba(255, 255, 255, 0.08);
}

.is-theme-dark {
  --section-bg: var(--color--dark);
  --section-fg: var(--color--white);
  --section-muted: rgba(255, 255, 255, 0.78);
  --section-border: rgba(255, 255, 255, 0.2);
  --section-accent: var(--color--white);
  --section-card-bg: rgba(255, 255, 255, 0.06);
}

.is-theme-red {
  --section-bg: var(--color--red);
  --section-fg: var(--color--white);
  --section-muted: rgba(255, 255, 255, 0.82);
  --section-border: rgba(255, 255, 255, 0.28);
  --section-accent: var(--color--white);
  --section-card-bg: rgba(255, 255, 255, 0.1);
}

.is-theme-transparent {
  --section-bg: transparent;
  --section-fg: inherit;
  --section-muted: var(--text-color--secondary);
  --section-border: var(--border-color--primary);
  --section-accent: var(--color--red);
  --section-card-bg: var(--color--grey);
}

/* Buttons und Links folgen dem Schema */
.is-theme-green .button.is-secondary,
.is-theme-dark .button.is-secondary,
.is-theme-red .button.is-secondary {
  border-color: var(--section-border);
  color: var(--color--white);
}

@media (hover: hover) {
  .is-theme-green .button.is-secondary:hover,
  .is-theme-dark .button.is-secondary:hover,
  .is-theme-red .button.is-secondary:hover {
    background-color: var(--color--white);
    border-color: var(--color--white);
    color: var(--color--dark);
  }
}

.is-theme-green .text-style-muted,
.is-theme-dark .text-style-muted,
.is-theme-red .text-style-muted {
  color: var(--section-muted);
}

/* =============================================================
   25. Section-Kopf (Eyebrow / Heading / Text / Aktion)
   ============================================================= */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space--40);
  margin-bottom: var(--space--48);
}

.section-head.is-center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space--24);
}

.section-head.is-stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--24);
}

.section-head_content {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
  max-width: 46rem;
}

.section-head.is-center .section-head_content {
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.section-head_eyebrow {
  color: var(--section-accent, var(--color--red));
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
  text-transform: uppercase;
}

.section-head_text {
  color: var(--section-muted, var(--text-color--secondary));
  max-width: 42rem;
}

.section-head_actions {
  display: flex;
  align-items: center;
  gap: var(--space--16);
  flex: none;
}

@media (max-width: 767px) {
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space--24);
    margin-bottom: var(--space--32);
  }
}

/* =============================================================
   26. Grid-Helfer
   ============================================================= */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr));
  gap: var(--grid-gap, var(--space--16));
}

.grid-auto.is-gap-large {
  --grid-gap: var(--space--32);
}
.grid-auto.is-gap-small {
  --grid-gap: var(--space--12);
}

@media (max-width: 991px) {
  .grid-auto {
    grid-template-columns: repeat(var(--grid-columns-tablet, 2), minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .grid-auto {
    grid-template-columns: repeat(var(--grid-columns-mobile, 1), minmax(0, 1fr));
  }
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space--64);
  align-items: center;
}

.split-layout.is-media-right {
  direction: ltr;
}
.split-layout.is-media-left > :first-child {
  order: 2;
}
.split-layout.is-narrow-media {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.split-layout.is-top {
  align-items: start;
}

@media (max-width: 991px) {
  .split-layout,
  .split-layout.is-narrow-media {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space--32);
  }
  .split-layout.is-media-left > :first-child {
    order: 0;
  }
}

/* =============================================================
   27. Media / Bildrahmen
   ============================================================= */
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius--medium);
  background-color: var(--color--grey);
}

.media-frame.is-square {
  aspect-ratio: 1 / 1;
}
.media-frame.is-landscape {
  aspect-ratio: 3 / 2;
}
.media-frame.is-wide {
  aspect-ratio: 16 / 9;
}
.media-frame.is-portrait {
  aspect-ratio: 3 / 4;
}
.media-frame.is-tall {
  aspect-ratio: 2 / 3;
}
.media-frame.is-sharp {
  border-radius: 0;
}

.media-frame_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--transition--base);
}

@media (hover: hover) {
  a:hover > .media-frame .media-frame_img,
  .media-frame:hover .media-frame_img {
    transform: scale(1.04);
  }
}

.media-frame_overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(35, 46, 32, 0) 40%, rgba(35, 46, 32, 0.72) 100%);
  pointer-events: none;
}

.media-frame_content {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space--28);
  color: var(--color--white);
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
}

/* =============================================================
   28. Badges, Chips, Meta
   ============================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space--8);
  padding: var(--space--4) var(--space--12);
  border-radius: var(--radius--pill);
  background-color: var(--color--green-light);
  color: var(--color--green);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--tracking--link-small);
  white-space: nowrap;
}

.badge.is-red {
  background-color: var(--color--red-light);
  color: var(--color--red);
}
.badge.is-dark {
  background-color: var(--color--dark);
  color: var(--color--white);
}
.badge.is-white {
  background-color: var(--color--white);
  color: var(--color--dark);
}
.badge.is-food {
  background-color: rgba(92, 127, 83, 0.14);
  color: var(--cat--food);
}
.badge.is-care {
  background-color: rgba(79, 120, 167, 0.14);
  color: var(--cat--care);
}
.badge.is-accessories {
  background-color: rgba(154, 89, 112, 0.14);
  color: var(--cat--accessories);
}
.badge.is-square {
  border-radius: 0;
}

.meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space--8);
  color: var(--section-muted, var(--text-color--secondary));
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
}

.meta-row_dot {
  width: 0.125rem;
  height: 0.125rem;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.7;
  flex: none;
}

/* Chips / Filter-Pills */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--8);
}

.chip-row.is-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.chip-row.is-scroll::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space--8);
  padding: var(--space--12) var(--space--24);
  border: 0.0625rem solid var(--section-border, var(--border-color--primary));
  border-radius: var(--radius--pill);
  background-color: transparent;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition--fast), border-color var(--transition--fast),
    color var(--transition--fast);
}

@media (hover: hover) {
  .chip:hover {
    border-color: var(--color--green);
    color: var(--color--green);
  }
}

.chip.is-active {
  background-color: var(--color--green);
  border-color: var(--color--green);
  color: var(--color--white);
}

/* =============================================================
   29. Karten-Basis
   ============================================================= */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
  background-color: var(--section-card-bg, var(--color--white));
  border-radius: var(--radius--medium);
  overflow: hidden;
  height: 100%;
  transition: box-shadow var(--transition--base), transform var(--transition--base);
}

.card.is-bordered {
  border: 0.0625rem solid var(--section-border, var(--border-color--primary));
}
.card.is-plain {
  background-color: transparent;
  border-radius: 0;
}
.card.is-gradient {
  background-image: var(--gradient--card);
  background-color: transparent;
}
.card.is-elevated {
  box-shadow: var(--shadow--sm);
}
@media (hover: hover) {
  .card.is-elevated:hover {
    box-shadow: var(--shadow--md);
    transform: translateY(-0.125rem);
  }
}

.card_body {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
  padding: var(--space--24);
  flex: 1;
}

.card.is-plain > .card_body {
  padding: var(--space--16) 0 0;
}

.card_footer {
  margin-top: auto;
  padding-top: var(--space--16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--12);
}

.card_title {
  font-size: var(--font-size--h5);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}

.card_text {
  color: var(--section-muted, var(--text-color--secondary));
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Kategorie-Kachel (Startseite) */
.category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space--32);
  padding: var(--space--48) var(--space--32);
  border-radius: var(--radius--medium);
  background-image: var(--gradient--card);
  text-align: center;
  height: 100%;
  transition: transform var(--transition--base), box-shadow var(--transition--base);
}

@media (hover: hover) {
  .category-tile:hover {
    transform: translateY(-0.1875rem);
    box-shadow: var(--shadow--sm);
  }
}

.category-tile_icon {
  width: auto;
  height: 5.6875rem;
  object-fit: contain;
}

.category-tile_title {
  font-family: var(--font--script);
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-size--h3);
  line-height: 1.25;
  letter-spacing: var(--tracking--script);
  color: var(--color--dark);
}

/* =============================================================
   30. Akkordeon (FAQ, Produktdetails)
   ============================================================= */
.accordion_list {
  display: flex;
  flex-direction: column;
  border-top: 0.0625rem solid var(--section-border, var(--border-color--primary));
}

.accordion_item {
  border-bottom: 0.0625rem solid var(--section-border, var(--border-color--primary));
}

.accordion_toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--24);
  width: 100%;
  padding: var(--space--24) 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.accordion_title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

.accordion_icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform var(--transition--base);
}

.accordion_item.is-open .accordion_icon {
  transform: rotate(180deg);
}

.accordion_panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition--base);
}

.accordion_item.is-open .accordion_panel {
  grid-template-rows: 1fr;
}

.accordion_panel-inner {
  overflow: hidden;
}

.accordion_content {
  padding-bottom: var(--space--24);
  color: var(--section-muted, var(--text-color--secondary));
  max-width: 52rem;
}

/* =============================================================
   31. Tabs
   ============================================================= */
.tabs_menu {
  display: flex;
  gap: var(--space--8);
  border-bottom: 0.0625rem solid var(--section-border, var(--border-color--primary));
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs_menu::-webkit-scrollbar {
  display: none;
}

.tabs_link {
  padding: var(--space--16) var(--space--24);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: var(--tracking--link);
  color: var(--section-muted, var(--text-color--secondary));
  border-bottom: 0.125rem solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition--fast), border-color var(--transition--fast);
}

@media (hover: hover) {
  .tabs_link:hover {
    color: var(--color--green);
  }
}

.tabs_link.is-active {
  color: var(--color--green);
  border-bottom-color: var(--color--green);
}

.tabs_content {
  padding-top: var(--space--40);
}

/* =============================================================
   32. Breadcrumb
   ============================================================= */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space--8);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
  color: var(--section-muted, var(--text-color--secondary));
}

@media (hover: hover) {
  .breadcrumb_link:hover {
    color: var(--color--red);
  }
}
.breadcrumb_current {
  color: inherit;
  font-weight: 600;
}
.breadcrumb_sep {
  opacity: 0.5;
}

/* =============================================================
   33. Sterne-Rating
   ============================================================= */
.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  color: var(--color--stars);
}

.star-rating_icon {
  width: 1rem;
  height: 1rem;
}

.star-rating_track {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  color: rgba(35, 46, 32, 0.22);
}

.star-rating_fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  overflow: hidden;
  width: calc(var(--rating, 5) / 5 * 100%);
  color: var(--color--stars);
  white-space: nowrap;
}

.star-rating_fill .star-rating_icon {
  flex: none;
}

.is-theme-green .star-rating_track,
.is-theme-dark .star-rating_track,
.is-theme-red .star-rating_track { color: rgba(255, 255, 255, 0.3); }

/* =============================================================
   34. Trust-Bar (ProvenExpert)
   ============================================================= */
.trust-bar_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space--20);
  flex-wrap: wrap;
  text-align: center;
}

.trust-bar_score {
  display: flex;
  align-items: center;
  gap: var(--space--12);
}

.trust-bar_logo {
  height: 1.75rem;
  width: auto;
  border-radius: var(--radius--small);
}

/* =============================================================
   35. Sonstige Helfer
   ============================================================= */
.icon-1x1-xsmall {
  width: 1rem;
  height: 1rem;
  flex: none;
}
.icon-1x1-small {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}
.icon-1x1-medium {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}
.icon-1x1-large {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
}

.divider {
  height: 0.0625rem;
  width: 100%;
  background-color: var(--section-border, var(--border-color--primary));
  border: 0;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space--16));
}

.stack.is-gap-small {
  --stack-gap: var(--space--8);
}
.stack.is-gap-large {
  --stack-gap: var(--space--32);
}

.inline-row {
  display: flex;
  align-items: center;
  gap: var(--space--12);
  flex-wrap: wrap;
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
}

.check-list_item {
  display: flex;
  align-items: flex-start;
  gap: var(--space--12);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.check-list_icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--color--green);
  margin-top: 0.125rem;
}

.is-theme-green .check-list_icon,
.is-theme-dark .check-list_icon,
.is-theme-red .check-list_icon { color: currentColor; }

.aspect-keep {
  display: block;
  width: 100%;
  height: auto;
}
.full-bleed-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fokuspunkt aus Shopify (Bild > Fokuspunkt festlegen), Fallback Mitte */
  object-position: var(--focal, 50% 50%);
}
.relative {
  position: relative;
}
.overflow-hidden {
  overflow: hidden;
}

/* =============================================================
   36. Slider-Steuerung (Dots + Pfeile)
   ============================================================= */
.slider-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--24);
  margin-top: var(--space--40);
}

.slider-nav_dots {
  display: flex;
  align-items: center;
  gap: var(--space--8);
  position: static !important;
}
.slider-nav_dots:not(.swiper-pagination-bullets-dynamic) {
  width: auto !important;
}

.slider-nav_dots .swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius--pill);
  background-color: currentColor;
  opacity: 0.25;
  margin: 0 !important;
  transition: opacity var(--transition--fast), background-color var(--transition--fast);
}

.slider-nav_dots .swiper-pagination-bullet-active {
  opacity: 1;
  background-color: var(--color--red);
}

.slider-nav_buttons {
  display: flex;
  align-items: center;
  gap: var(--space--12);
}

.slider-nav_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--grey);
  color: var(--color--dark);
  transition: background-color var(--transition--fast), color var(--transition--fast), opacity var(--transition--fast);
}

@media (hover: hover) {
  .slider-nav_button:hover {
    background-color: var(--color--dark);
    color: var(--color--white);
  }
}
.slider-nav_button .icon-svg {
  width: 1.125rem;
  height: 1.125rem;
}
.slider-nav_button.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.is-theme-green .slider-nav_button,
.is-theme-dark .slider-nav_button,
.is-theme-red .slider-nav_button {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color--white);
}

.swiper {
  width: 100%;
  overflow: visible;
}
.swiper-wrapper {
  display: flex;
}
.swiper-slide {
  height: auto;
  flex-shrink: 0;
}
.section_inner .swiper {
  overflow: hidden;
}

/* =============================================================
   37. Hero-Slider
   ============================================================= */
.section_hero-slider {
  position: relative;
}

.hero-slider_inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.hero-slider_swiper {
  overflow: hidden;
}

.hero-slider_slide {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--hero-min-height, 43.75rem);
  width: 100%;
}

.hero-slider_media {
  position: absolute;
  inset: 0;
}

.hero-slider_overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(0deg, rgba(35, 8, 3, 0.7) 12%, rgba(29, 11, 11, 0) 62%),
    linear-gradient(180deg, rgba(29, 11, 11, 0.25) 0%, rgba(29, 11, 11, 0) 32%);
  opacity: calc(var(--hero-overlay, 35) / 35);
}

.hero-slider_content-wrap {
  position: relative;
  width: 100%;
  padding-bottom: var(--space--80);
  padding-top: calc(var(--nav--topbar-height) + 6rem);
}

.hero-slider_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--12);
  max-width: 34rem;
  color: var(--color--white);
}

.hero-slider_eyebrow,
.hero-slider_heading { color: var(--color--white); }
.hero-slider_content > * {
  margin: 0;
}
.hero-slider_text {
  color: rgba(255, 255, 255, 0.85);
}

.hero-slider_content .button-group {
  gap: var(--space--16);
}

/* Dots: waagerecht unten rechts, buendig mit Containerkante und Button-Unterkante */
.section_hero-slider .hero-slider_dots {
  position: absolute;
  top: auto !important;
  bottom: var(--space--80) !important;
  left: auto !important;
  right: max(var(--space--80), calc((100% - var(--container--large)) / 2));
  transform: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  width: auto !important;
  z-index: 3;
}

.section_hero-slider .hero-slider_dots .swiper-pagination-bullet {
  display: block;
  flex: none;
  box-sizing: border-box;
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0;
  min-height: 0;
  padding: 0;
  aspect-ratio: 1 / 1;
  margin: 0 !important;
  border: 0;
  border-radius: 50%;
  background-color: var(--color--white);
  opacity: 0.5;
  cursor: pointer;
  transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

@media (hover: hover) {
  .section_hero-slider .hero-slider_dots .swiper-pagination-bullet:hover {
    opacity: 0.8;
  }
}

.section_hero-slider .hero-slider_dots .swiper-pagination-bullet-active {
  opacity: 1;
  width: 1.25rem;
  height: 1.25rem;
}

.section_hero-slider .hero-slider_dots .swiper-pagination-bullet:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.1875rem;
  opacity: 1;
}

/* Nur ein Slide: keine Dots */
.section_hero-slider .hero-slider_dots.swiper-pagination-lock {
  display: none;
}

.hero-slider_slide:focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .section_hero-slider .hero-slider_dots .swiper-pagination-bullet {
    transition: none;
  }
}

@media (max-width: 991px) {
  .section_hero-slider .hero-slider_dots {
    right: var(--space--40);
  }
}

@media (max-width: 767px) {
  .hero-slider_slide {
    min-height: min(var(--hero-min-height, 43.75rem), 78vh);
  }
  .hero-slider_content-wrap {
    padding-top: 8rem;
    padding-bottom: 4.375rem;
  }
  .hero-slider_content {
    gap: var(--space--20);
  }
  .section_hero-slider .hero-slider_dots {
    left: 0 !important;
    right: 0;
    bottom: var(--space--32) !important;
    justify-content: center;
    gap: 0.3125rem;
  }
  .section_hero-slider .hero-slider_dots .swiper-pagination-bullet,
  .section_hero-slider .hero-slider_dots .swiper-pagination-bullet-active {
    width: 0.5rem;
    height: 0.5rem;
  }
  .section_hero-slider .hero-slider_dots .swiper-pagination-bullet {
    opacity: 0.3;
  }
  .section_hero-slider .hero-slider_dots .swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--color--red);
  }
}

/* =============================================================
   38. Trust-Bar
   ============================================================= */
.trust-bar_logo-link {
  display: flex;
  align-items: center;
}

/* =============================================================
   39. Kategorie-Kacheln
   ============================================================= */
.category-tiles_grid {
  --grid-columns: 4;
  --grid-columns-tablet: 2;
  --grid-columns-mobile: 1;
}
.category-tiles_item {
  display: flex;
}

.category-tile_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--4);
}

.meta-row.is-center {
  justify-content: center;
}

@media (max-width: 767px) {
  .category-tile {
    padding: var(--space--32) var(--space--20);
    gap: var(--space--20);
  }
  .category-tile_icon {
    height: 4rem;
  }
}

/* =============================================================
   40. Produkt-Slider mit Tabs
   ============================================================= */
.product-slider_menu {
  border-bottom: 0;
  gap: var(--space--16);
  flex: none;
}
.product-slider_menu .tabs_link {
  padding: var(--space--8) 0;
  border-bottom-width: 0.125rem;
}

.product-slider_tab {
  display: none;
}
.product-slider_tab.is-active {
  display: block;
}
.product-slider_tab-label {
  display: none;
}

.product-slider_promo {
  display: flex;
}

.product-slider_promo-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space--32);
  width: 100%;
  height: 100%;
  padding: var(--space--32);
  border-radius: var(--radius--medium);
  color: var(--color--white);
  background-color: var(--cat--food);
  padding-top: 0rem;
}

.product-slider_promo-script {
  color: rgba(255, 255, 255, 0.9);
}

.product-slider_promo-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--12);
  text-align: center;
}

.product-slider_promo-heading {
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}

.product-slider_promo-text {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* =============================================================
   41. Produkt-Karte
   ============================================================= */
.product-item_component {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color--white);
  border-radius: var(--radius--medium);
  overflow: hidden;
  border: 0.0625rem solid var(--border-color--primary);
  transition: box-shadow var(--transition--base), transform var(--transition--base);
}

@media (hover: hover) {
  .product-item_component:hover {
    box-shadow: var(--shadow--md);
  }
}

.product-item_media {
  position: relative;
}

.product-item_image-wrapper {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color--white);
}

.product-item_image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space--20);
  transition: transform 400ms var(--transition--base);
}

@media (hover: hover) {
  .product-item_component:hover .product-item_image {
    transform: scale(1.04);
  }
}

.product-item_tag_list {
  position: absolute;
  top: var(--space--12);
  left: var(--space--12);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--4);
}

.product-item_favorite {
  position: absolute;
  top: var(--space--12);
  right: var(--space--12);
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color--red);
  transition: transform var(--transition--fast);
}

@media (hover: hover) {
  .product-item_favorite:hover {
    transform: scale(1.12);
  }
}

.product-item_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--8);
  padding: var(--space--16) var(--space--20) var(--space--20);
  text-align: center;
  flex: 1;
}

.product-item_title {
  font-size: 1.125rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}


.product-item_text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-color--secondary);
  margin: 0;
}

.product-item_price {
  display: flex;
  align-items: baseline;
  gap: var(--space--8);
  font-size: 1rem;
  font-weight: 600;
  margin-top: auto;
  padding-top: var(--space--8);
}

.product-item_price-compare {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--text-color--secondary);
  text-decoration: line-through;
}

.product-item_footer {
  padding: 0 var(--space--20) var(--space--20);
}
.product-item_footer .button {
  padding-left: var(--space--16);
  padding-right: var(--space--16);
}

.star-rating_value {
  font-size: 0.8125rem;
  color: var(--text-color--secondary);
  margin-left: var(--space--4);
}

/* =============================================================
   42. Rubriken-Slider
   ============================================================= */
.guide-slider_card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 24.5rem;
  padding: var(--space--40);
  border-radius: var(--radius--medium);
  overflow: hidden;
  color: var(--color--white);
}

.guide-slider_overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(35, 46, 32, 0.15) 0%, rgba(35, 46, 32, 0.72) 100%);
}

.guide-slider_script {
  position: absolute;
  top: var(--space--32);
  left: var(--space--40);
  color: rgba(255, 255, 255, 0.9);
}

.guide-slider_body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--16);
  max-width: 26rem;
}

.guide-slider_heading {
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}

.guide-slider_text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.guide-slider_button {
  margin-top: var(--space--8);
}

@media (max-width: 767px) {
  .guide-slider_card {
    min-height: 20rem;
    padding: var(--space--24);
  }
  .guide-slider_script {
    top: var(--space--20);
    left: var(--space--24);
  }
}

/* =============================================================
   43. Script-Laufband
   ============================================================= */
.script-ticker_viewport {
  overflow: hidden;
  width: 100%;
}

.script-ticker_track {
  display: flex;
  width: max-content;
  animation: script-ticker var(--ticker-speed, 40s) linear infinite;
}

.script-ticker_group {
  display: flex;
  align-items: center;
}

.script-ticker_item {
  display: flex;
  align-items: center;
  gap: var(--space--40);
  padding-right: var(--space--40);
  color: var(--color--neutral-dark);
  white-space: nowrap;
}

.script-ticker_dot {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: var(--color--red);
  flex: none;
}

@keyframes script-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-33.3333%); }
}

@media (prefers-reduced-motion: reduce) {
  .script-ticker_track {
    animation: none;
  }
}

/* =============================================================
   44. Rezepte-Slider
   ============================================================= */
.recipe-slider_layout {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--space--64);
  align-items: center;
}

.recipe-slider_intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--16);
}

.recipe-slider_intro .button {
  margin-top: var(--space--8);
}
.recipe-slider_intro .slider-nav {
  width: 100%;
  justify-content: flex-start;
  gap: var(--space--32);
  margin-top: var(--space--32);
}
.recipe-slider_track {
  min-width: 0;
}

.recipe-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 37.9375rem;
  padding: var(--space--8);
  background-color: var(--color--white);
  border-radius: var(--radius--medium);
  box-shadow: var(--shadow--sm);
}

.recipe-card_media {
  position: relative;
}
.recipe-card_media .media-frame {
  border-radius: var(--radius--small);
  display: block;
  overflow: hidden;
}

.recipe-card_media .recipe-card_badge {
  position: absolute;
  top: 0.625rem;
  left: 0;
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0.0625rem 0.976rem 0;
  border-radius: 0;
  background-color: #628859;
  color: var(--color--white);
  font-size: 0.9375rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.66;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 767px) {
  .recipe-card_media .recipe-card_badge {
    height: 1.5rem;
    padding: 0.0625rem 0.976rem 0 0.75rem;
    font-size: 0.875rem;
  }
}

.recipe-card_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--12);
  padding: var(--space--24) var(--space--24) var(--space--16);
  text-align: center;
  flex: 1;
}

.recipe-card_title {
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}

.recipe-card_text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-color--secondary);
}
.recipe-card_footer {
  padding: 0 var(--space--24) var(--space--24);
}

@media (max-width: 991px) {
  .recipe-slider_layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space--32);
    padding-right: var(--space--40) !important;
  }
}

@media (max-width: 767px) {
  .recipe-slider_layout {
    padding-right: var(--space--20) !important;
  }
}

/* =============================================================
   45. Bewertungen
   ============================================================= */
.reviews_hero {
  margin-bottom: var(--space--24);
}

.reviews_promo,
.reviews_card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 15rem;
  border-radius: var(--radius--medium);
  padding: var(--space--24);
}

.reviews_promo {
  justify-content: space-between;
  gap: var(--space--24);
  background-color: var(--color--red);
  color: var(--color--white);
  text-align: center;
  align-items: center;
}

.reviews_promo-script {
  color: rgba(255, 255, 255, 0.9);
}

.reviews_promo-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--12);
}

.reviews_promo-heading {
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
  line-height: 1.2;
}

.reviews_card {
  align-items: center;
  gap: var(--space--12);
  text-align: center;
  background-color: var(--color--white);
  border: 0.0625rem solid var(--border-color--primary);
}

.reviews_card-title {
  font-size: 1rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: var(--tracking--heading);
}

.reviews_card-text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-color--secondary);
}

.reviews_card-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space--4);
  margin-top: auto;
  padding-top: var(--space--16);
  font-size: 0.75rem;
  color: var(--text-color--secondary);
}

/* =============================================================
   46. Testimonial-Slider
   ============================================================= */
.testimonial-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background-color: var(--color--white);
  border-radius: var(--radius--medium);
  overflow: hidden;
  border: 0.0625rem solid var(--border-color--primary);
  min-height: 24.5rem;
}

.testimonial-card_media {
  border-radius: 0;
  height: 100%;
}

.testimonial-card_body {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
  padding: var(--space--40);
  justify-content: center;
}

.testimonial-card_script {
  align-self: flex-end;
  color: var(--color--neutral);
}

.testimonial-card_quote {
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: var(--tracking--heading);
}

.testimonial-card_text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-color--secondary);
}
.testimonial-card_person {
  font-size: 0.875rem;
}

@media (max-width: 767px) {
  .testimonial-card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .testimonial-card_body {
    padding: var(--space--24);
  }
  .testimonial-card_media {
    aspect-ratio: 4 / 3;
  }
}

/* =============================================================
   47. Markenwelt
   ============================================================= */
.section_brand-world {
  position: relative;
}
.brand-world_inner {
  position: relative;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.brand-world_bg {
  position: absolute;
  inset: 0;
}

.brand-world_overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(35, 46, 32, 0.35) 0%, rgba(35, 46, 32, 0.15) 60%, rgba(35, 46, 32, 0.45) 100%);
}

.brand-world_content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--16);
  text-align: center;
  color: var(--color--white);
}

.brand-world_wordmark {
  font-size: 3.5rem;
  line-height: 1.2;
}
.brand-world_text {
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.9);
}

.brand-world_links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space--12);
  margin-top: var(--space--16);
}

.brand-world_link {
  display: inline-flex;
  align-items: center;
  gap: var(--space--8);
  padding: var(--space--8) var(--space--20);
  border-radius: var(--radius--pill);
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--color--dark);
  font-size: 0.875rem;
  font-weight: 600;
  font-style: italic;
  transition: background-color var(--transition--fast);
}

@media (hover: hover) {
  .brand-world_link:hover {
    background-color: var(--color--white);
  }
}
.brand-world_link-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.brand-world_quote {
  position: relative;
  margin: var(--space--100) auto 0;
  max-width: 30rem;
  padding: var(--space--32);
  border-radius: var(--radius--medium);
  background-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(0.375rem);
  text-align: center;
  color: var(--color--white);
}

.brand-world_quote-text {
  font-size: 1.0625rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
}

.brand-world_quote-author {
  display: block;
  margin-top: var(--space--12);
  font-size: 0.75rem;
  opacity: 0.85;
}

@media (max-width: 767px) {
  .brand-world_wordmark {
    font-size: 2.5rem;
  }
  .brand-world_quote {
    margin-top: var(--space--48);
    padding: var(--space--24);
  }
}

/* =============================================================
   48. News-Slider & Artikel-Karte
   ============================================================= */
.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--space--16);
}

.article-card_media {
  border-radius: var(--radius--medium);
}
.article-card_badge {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color--red);
  color: var(--color--white);
}

.article-card_body {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
}

.article-card_date {
  font-size: 0.8125rem;
  color: var(--text-color--secondary);
  letter-spacing: var(--tracking--link);
}

.article-card_title {
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: var(--tracking--heading);
}

@media (hover: hover) {
  .article-card:hover .article-card_title { color: var(--color--red);
  }
}
.article-card_text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-color--secondary);
  margin: 0;
}

/* =============================================================
   49. Social Media
   ============================================================= */
.section_social-media .section_inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.social-media_layout {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  align-items: stretch;
}

.social-media_promo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space--32);
  padding: var(--space--32);
  background-color: var(--color--red);
  color: var(--color--white);
  text-align: center;
}

.social-media_script {
  color: rgba(255, 255, 255, 0.9);
}

.social-media_promo-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--16);
}

.social-media_logo {
  max-width: 9rem;
  height: auto;
}
.social-media_promo-text {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.social-media_track {
  position: relative;
  min-width: 0;
}
.social-media_card {
  border-radius: 0;
  height: 100%;
  display: block;
}

.social-media_play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color--white);
  pointer-events: none;
}

.social-media_play .icon-svg {
  width: 3rem;
  height: 3rem;
  opacity: 0.9;
}

.social-media_next {
  position: absolute;
  top: 50%;
  right: var(--space--24);
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--white);
  color: var(--color--dark);
  box-shadow: var(--shadow--sm);
}

.social-media_next .icon-svg {
  width: 1.125rem;
  height: 1.125rem;
}

@media (max-width: 767px) {
  .social-media_layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .social-media_promo {
    padding: var(--space--24);
  }
}

/* =============================================================
   50. SEO-Text
   ============================================================= */
.seo-text_wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space--24);
}

.seo-text_columns {
  column-count: var(--seo-columns, 1);
  column-gap: var(--space--48);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-color--secondary);
}

.seo-text_columns p {
  orphans: 3;
  widows: 3;
}
.seo-text_columns > :first-child {
  margin-top: 0;
}

@media (max-width: 767px) {
  .seo-text_columns {
    column-count: 1;
  }
}

/* =============================================================
   51. Newsletter-CTA
   ============================================================= */
.section_newsletter-cta {
  position: relative;
}
.newsletter-cta_inner {
  position: relative;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.newsletter-cta_bg {
  position: absolute;
  inset: 0;
}

.newsletter-cta_overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(21, 32, 19, 0.55);
}

.newsletter-cta_content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--16);
  text-align: center;
  color: var(--color--white);
}

.newsletter-cta_form-block {
  width: 100%;
  max-width: 30rem;
  margin-top: var(--space--12);
}

.newsletter-cta_form {
  display: flex;
  gap: var(--space--8);
  align-items: stretch;
}

.newsletter-cta_input {
  flex: 1;
  background-color: var(--color--white);
  border-color: transparent;
  border-radius: 0;
}

.newsletter-cta_form .button {
  flex: none;
  padding-left: var(--space--32);
  padding-right: var(--space--32);
}

.newsletter-cta_note {
  font-size: 0.6875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  max-width: 28rem;
}

.newsletter-cta_note a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .newsletter-cta_form {
    flex-direction: column;
  }
}

/* =============================================================
   52. Collection Hero
   ============================================================= */
.section_collection-hero {
  position: relative;
}
.collection-hero_inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.collection-hero_bg {
  position: absolute;
  inset: 0;
}

.collection-hero_overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(35, 46, 32, 0.55) 0%, rgba(35, 46, 32, 0.1) 60%),
    linear-gradient(180deg, rgba(35, 46, 32, 0.35) 0%, rgba(35, 46, 32, 0) 40%);
}

.collection-hero_content-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--hero-min-height, 27.5rem);
  padding-top: calc(var(--nav--topbar-height) + 6rem);
  padding-bottom: var(--space--40);
}

.collection-hero_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--16);
  color: var(--color--white);
  max-width: 42rem;
}

.collection-hero_eyebrow,
.collection-hero_heading { color: var(--color--white); }
.collection-hero_text {
  color: rgba(255, 255, 255, 0.85);
}

.collection-hero_content .chip {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--color--white);
  backdrop-filter: blur(0.25rem);
}

.collection-hero_content .chip.is-active {
  background-color: var(--color--white);
  border-color: var(--color--white);
  color: var(--color--dark);
}
@media (hover: hover) {
  .collection-hero_content .chip:hover {
    background-color: var(--color--white);
    border-color: var(--color--white);
    color: var(--color--dark);
  }
}

.anchor-chips {
  margin-top: var(--space--12);
}

@media (max-width: 767px) {
  .collection-hero_content-wrap {
    padding-top: 7rem;
  }
}

/* =============================================================
   53. Collection Products
   ============================================================= */
.collection-products_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--24);
  flex-wrap: wrap;
  margin-bottom: var(--space--32);
}

.collection-products_tools {
  display: flex;
  align-items: center;
  gap: var(--space--12);
}

.collection-products_sort {
  position: relative;
  gap: var(--space--4);
}
.collection-products_sort-form {
  display: inline-flex;
}

.collection-products_sort-select {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--color--red);
  cursor: pointer;
  appearance: none;
  padding: 0 var(--space--4);
}

.collection-products_filter-toggle.is-active {
  border-color: var(--color--green);
  color: var(--color--green);
}

.collection-products_filters {
  display: none;
  margin-bottom: var(--space--32);
  padding: var(--space--24);
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  border: 0.0625rem solid var(--border-color--primary);
}

.collection-products_filters.is-open {
  display: block;
}

.collection-products_filter-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space--24);
}

.collection-products_filter-title {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: var(--space--12);
}

.collection-products_filter-list {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
}

.collection-products_grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 4), minmax(0, 1fr));
  gap: var(--space--24);
}

.collection-products_empty {
  padding: var(--space--48) 0;
  text-align: center;
  color: var(--text-color--secondary);
}

@media (max-width: 991px) {
  .collection-products_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .collection-products_grid {
    grid-template-columns: repeat(var(--grid-columns-mobile, 1), minmax(0, 1fr));
    gap: var(--space--12);
  }
  .collection-products_head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =============================================================
   54. Kollektions-Kacheln
   ============================================================= */
.collection-cards_grid {
  --grid-columns: 3;
  --grid-columns-tablet: 2;
  --grid-columns-mobile: 1;
}
.collection-cards_item {
  display: flex;
}

.collection-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--radius--medium);
  overflow: hidden;
}

.collection-card_media {
  position: relative;
  border-radius: 0;
  display: block;
}

.collection-card_body {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space--4);
  padding: var(--space--28);
  color: var(--color--white);
}

.collection-card_title {
  font-family: var(--font--script);
  font-size: var(--font-size--h3);
  line-height: 1.4;
  letter-spacing: var(--tracking--script);
}

.collection-card_text {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
}

/* =============================================================
   55. Split-Banner (Bild | Panel | Bild)
   ============================================================= */
.section_split-banner .section_inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.split-banner_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem) minmax(0, 1fr);
  align-items: stretch;
  min-height: 23.5rem;
}

.split-banner_media {
  height: 100%;
}

.split-banner_panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space--8);
  padding: var(--space--40);
  background-color: var(--cat--food);
  color: var(--color--white);
  text-align: center;
}

.split-banner_eyebrow,
.split-banner_subtitle {
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}

.split-banner_wordmark {
  font-size: 2.75rem;
  line-height: 1.3;
}
.split-banner_panel .button {
  margin-top: var(--space--20);
}

@media (max-width: 991px) {
  .split-banner_layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .split-banner_media {
    aspect-ratio: 16 / 9;
  }
}

/* =============================================================
   56. Produkt-Header
   ============================================================= */
.product-header_breadcrumb {
  margin-bottom: var(--space--24);
}

.product-header_layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space--48);
  align-items: start;
}

.product-header_left {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
  min-width: 0;
}

.product-header_gallery {
  position: relative;
  background-color: var(--color--grey);
  border-radius: var(--radius--medium);
  padding: var(--space--32);
}

.product-header_badges {
  position: absolute;
  top: var(--space--16);
  left: var(--space--16);
  z-index: 2;
}

.product-header_certs {
  position: absolute;
  top: var(--space--16);
  right: var(--space--16);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
}

.product-header_cert-img {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

.product-header_main-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-header_main-img {
  width: 100%;
  height: 100%;
  max-height: 28rem;
  object-fit: contain;
}

.product-header_thumb-swiper {
  margin-top: var(--space--20);
}

.product-header_thumb {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius--pill);
  overflow: hidden;
  border: 0.0625rem solid var(--border-color--primary);
  background-color: var(--color--white);
  cursor: pointer;
  transition: border-color var(--transition--fast);
}

.product-header_thumb.swiper-slide-thumb-active {
  border-color: var(--color--green);
}
.product-header_thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.25rem;
}

/* Story-Mosaik */
.product-header_story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space--16);
}

.product-header_story-media {
  aspect-ratio: 325 / 438;
  border-radius: var(--radius--medium);
  overflow: hidden;
}
.product-header_story-media.is-wide {
  grid-column: span 2;
  aspect-ratio: 1 / 1;
}

.product-header_story-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space--32);
  padding: var(--space--28);
  background-color: var(--cat--food);
  color: var(--color--white);
  aspect-ratio: 325 / 438;
  border-radius: var(--radius--medium);
}

.product-header_story-script {
  color: rgba(255, 255, 255, 0.85);
}

.product-header_story-body {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
  text-align: center;
}

.product-header_story-title {
  font-size: 1.125rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}

.product-header_story-text {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* Detail-Spalte */
.product-header_details {
  display: flex;
  flex-direction: column;
  gap: var(--space--20);
  position: sticky;
  top: var(--space--24);
}

.product-header_title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space--16);
}
.product-header_favorite {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color--red);
  flex: none;
}
.product-header_rating {
  display: flex;
  align-items: center;
  gap: var(--space--8);
}
.product-header_rating-text {
  font-size: 0.8125rem;
  color: var(--text-color--secondary);
}
.product-header_intro {
  color: var(--text-color--secondary);
}
.product-header_benefits {
  gap: var(--space--8);
}

.product-header_buy {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
}

.product-header_price-wrapper {
  display: flex;
  align-items: baseline;
  gap: var(--space--12);
  flex-wrap: wrap;
}

.product-header_price {
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}

.product-header_price-compare {
  font-size: 1rem;
  color: var(--text-color--secondary);
  text-decoration: line-through;
}
.product-header_price-unit {
  font-size: 0.8125rem;
  color: var(--text-color--secondary);
}

.product-header_tax-note {
  font-size: 0.75rem;
  color: var(--text-color--secondary);
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

.product-header_form {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
}
.product-header_option {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
}
.product-header_option-name {
  font-size: 0.875rem;
  font-weight: 600;
}
.product-header_radio-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--8);
}

.product-header_radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space--12) var(--space--20);
  border: 0.0625rem solid var(--border-color--strong);
  border-radius: 0;
  cursor: pointer;
  font-size: 0.9375rem;
  transition: border-color var(--transition--fast), background-color var(--transition--fast);
}

@media (hover: hover) {
  .product-header_radio:hover {
    border-color: var(--color--green);
  }
}

.product-header_radio:has(input:checked) {
  border-color: var(--color--green);
  background-color: var(--color--green-light);
}

.product-header_buy-wrappper {
  display: flex;
  gap: var(--space--8);
}
.product-header_buy-wrappper .form_input.is-quantity {
  width: 4.5rem;
  text-align: center;
  border-radius: 0;
}

.product-header_shipping {
  display: flex;
  align-items: center;
  gap: var(--space--8);
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--text-color--secondary);
}

.product-header_shipping-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.product-header_dealer-note {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
  padding: var(--space--20);
  background-color: var(--color--grey);
  border-radius: var(--radius--medium);
}

.product-header_icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--16);
  justify-content: center;
}

.product-header_icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--4);
  width: 4.5rem;
}

.product-header_icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius--pill);
  border: 0.0625rem solid var(--border-color--primary);
}

.product-header_icon-img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}
.product-header_icon-label {
  font-size: 0.625rem;
  text-align: center;
  color: var(--text-color--secondary);
}

.product-header_results {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
}

.product-header_results-title {
  font-size: 0.9375rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}

.product-header_results-grid {
  display: flex;
  gap: var(--space--8);
  align-items: stretch;
}
.product-header_results-list {
  display: flex;
  gap: var(--space--8);
  flex: 1;
}
.product-header_result {
  flex: 1;
}

.product-header_result-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius--small);
}

.product-header_result-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  border-radius: var(--radius--small);
  background-color: var(--cat--food);
  color: var(--color--white);
  font-weight: 600;
  flex: none;
}

.product-header_accordion {
  margin-top: var(--space--8);
}

.product-header_cross {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
}

.product-header_cross-title {
  font-size: 0.9375rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}

.product-header_cross-item {
  display: flex;
  align-items: center;
  gap: var(--space--12);
  padding: var(--space--12);
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--medium);
}

.product-header_cross-media {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
}
.product-header_cross-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-header_cross-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}

.product-header_cross-name {
  font-size: 0.9375rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}

.product-header_cross-text {
  font-size: 0.75rem;
  color: var(--text-color--secondary);
}
.product-header_cross-price {
  font-size: 0.8125rem;
  font-weight: 600;
  font-style: italic;
}

.product-header_cross-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--red);
  color: var(--color--white);
  flex: none;
}

.product-header_cross-add .icon-svg {
  width: 1.125rem;
  height: 1.125rem;
}
.product-header_anchors {
  margin-top: var(--space--8);
}
.chip.is-small {
  padding: var(--space--8) var(--space--16);
  font-size: 0.8125rem;
}

@media (max-width: 991px) {
  .product-header_layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space--32);
  }
  .product-header_details {
    position: static;
  }
}

@media (max-width: 767px) {
  .product-header_gallery {
    padding: var(--space--16);
  }
  .product-header_story-panel {
    padding: var(--space--20);
    aspect-ratio: auto;
  }
}

/* =============================================================
   57. Produkt Warum
   ============================================================= */
.section_product-why {
  position: relative;
}
.product-why_inner {
  position: relative;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.product-why_bg {
  position: absolute;
  inset: 0;
}

.product-why_content-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--why-min-height, 37.5rem);
  padding-top: var(--space--48);
  padding-bottom: var(--space--48);
}

.product-why_panel {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
  width: min(28rem, 100%);
  padding: var(--space--40);
  background-color: var(--cat--food);
  color: var(--color--white);
  text-align: center;
}

.product-why_script {
  color: rgba(255, 255, 255, 0.85);
}

.product-why_heading {
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}

.product-why_intro {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.product-why_accordion {
  margin-top: var(--space--16);
  text-align: left;
  border-top-color: rgba(255, 255, 255, 0.2);
}
.product-why_accordion .accordion_item {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.product-why_accordion .accordion_title {
  font-size: 0.9375rem;
  font-weight: 700;
  font-style: italic;
}
.product-why_accordion .accordion_content {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8125rem;
}

.accordion_icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius--pill);
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color--dark);
}

.accordion_icon-circle .icon-svg {
  width: 0.75rem;
  height: 0.75rem;
}
.accordion_item.is-open .accordion_icon-circle {
  transform: none;
}
.accordion_item.is-open .accordion_icon-circle .icon-svg > svg > path:last-child {
  display: none;
}

@media (max-width: 767px) {
  .product-why_panel {
    width: 100%;
    padding: var(--space--24);
  }
}

/* =============================================================
   58. Produkt Anleitung
   ============================================================= */
.product-steps_menu {
  border-bottom: 0;
  gap: var(--space--16);
  flex: none;
}
.product-steps_menu .tabs_link {
  padding: var(--space--8) 0;
}
.product-steps_tab {
  display: none;
}
.product-steps_tab.is-active {
  display: block;
}
.product-steps_tab-label {
  display: none;
}
.product-steps_media {
  margin-bottom: var(--space--48);
}

.product-steps_list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space--32);
}

.product-steps_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--12);
  text-align: center;
  position: relative;
}

.product-steps_item::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -50%;
  right: 50%;
  height: 0.0625rem;
  background-color: var(--border-color--primary);
}

.product-steps_item:first-child::before {
  display: none;
}

.product-steps_number {
  color: var(--color--dark);
  position: relative;
  z-index: 1;
  padding: 0 var(--space--16);
  background-color: var(--section-bg, #fff);
}

.product-steps_title {
  font-size: 1.125rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}

.product-steps_text {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-color--secondary);
}

@media (max-width: 767px) {
  .product-steps_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-steps_item::before {
    display: none;
  }
}

/* =============================================================
   59. Produkt Zutaten / Nährwerte / Ergiebigkeit / Auszeichnungen
   ============================================================= */
.ingredients_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 10rem));
  justify-content: center;
  gap: var(--space--24);
  margin-bottom: var(--space--48);
}

.ingredients_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--12);
  text-align: center;
}
.ingredients_media {
  width: 100%;
  border-radius: var(--radius--pill);
}

.ingredients_title {
  font-size: 0.9375rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}

.ingredients_text-block {
  display: flex;
  flex-direction: column;
  gap: var(--space--24);
  max-width: 48rem;
  margin: 0 auto;
}
.ingredients_note {
  padding-top: var(--space--16);
  border-top: 0.0625rem solid var(--section-border);
}
.ingredients_note-title {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: var(--space--4);
}

.nutrition_layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space--48);
  align-items: start;
}

.nutrition_table {
  background-color: var(--color--white);
  border-radius: var(--radius--medium);
  padding: var(--space--12) var(--space--24);
}

.nutrition_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
  padding: var(--space--12) 0;
  border-bottom: 0.0625rem solid var(--border-color--primary);
  font-size: 0.9375rem;
}

.nutrition_row:last-of-type {
  border-bottom: 0;
}
.nutrition_row.is-header {
  font-weight: 600;
  font-style: italic;
}
.nutrition_value {
  font-weight: 600;
  white-space: nowrap;
}
.nutrition_footnote {
  padding: var(--space--12) 0;
  font-size: 0.75rem;
  color: var(--text-color--secondary);
}

.nutrition_nutrients {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
}
.nutrition_nutrients-title {
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}
.nutrition_nutrients-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--8);
}

.yield_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 14rem));
  gap: var(--space--16);
}

.yield_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--4);
  padding: var(--space--24);
  border-radius: var(--radius--medium);
  background-image: var(--gradient--card);
  text-align: center;
}

.yield_amount {
  font-size: var(--font-size--h3);
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}
.yield_period {
  font-size: 0.875rem;
  font-weight: 600;
}
.yield_title {
  font-size: 0.75rem;
  color: var(--text-color--secondary);
}

.awards_layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space--48);
  align-items: center;
}
.awards_list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--32);
  align-items: center;
}
.awards_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--8);
  width: 7rem;
}
.awards_img {
  max-width: 100%;
  height: 4.5rem;
  object-fit: contain;
}
.awards_title {
  font-size: 0.6875rem;
  text-align: center;
  color: var(--text-color--secondary);
}

@media (max-width: 991px) {
  .nutrition_layout, .awards_layout { grid-template-columns: minmax(0, 1fr); gap: var(--space--32); }
}

/* =============================================================
   60. Broschüre & FAQ & Erfahrungen
   ============================================================= */
.brochure_panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space--32);
  border-radius: var(--radius--medium);
  overflow: hidden;
  background-color: var(--cat--food);
  color: var(--color--white);
}

.brochure_body {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
  padding: var(--space--48);
}
.brochure_eyebrow {
  font-size: 0.875rem;
  font-style: italic;
  font-weight: 600;
  opacity: 0.9;
}

.brochure_heading {
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}

.brochure_text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}
.brochure_body .button {
  align-self: flex-start;
  margin-top: var(--space--12);
}
.brochure_media {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space--24);
}
.brochure_img {
  max-width: 100%;
  height: auto;
}

.faq_layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space--48);
  align-items: start;
}
.faq_main {
  display: flex;
  flex-direction: column;
  gap: var(--space--40);
}
.faq_head {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
}
.faq_group {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
}
.faq_group-title {
  font-size: var(--font-size--h5);
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}

.faq_promo-inner,
.experiences_promo-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space--32);
  padding: var(--space--32);
  border-radius: var(--radius--medium);
  background-color: var(--color--red);
  color: var(--color--white);
  text-align: center;
  align-items: center;
}

.faq_promo-script,
.experiences_promo-script { color: rgba(255, 255, 255, 0.9); }

.faq_promo-body,
.experiences_promo-body { display: flex; flex-direction: column; align-items: center; gap: var(--space--12); }

.faq_promo-heading,
.experiences_promo-heading {
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}

.faq_promo-text,
.experiences_promo-sub { font-size: 0.8125rem; line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
.experiences_promo-rating {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
}

.experiences_layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space--32);
  align-items: start;
}
.experiences_promo {
  position: sticky;
  top: var(--space--24);
}
.experiences_list {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
}
.experiences_items {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
}

.experiences_card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
  padding: var(--space--28);
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  box-shadow: var(--shadow--sm);
}

.experiences_card-head {
  display: flex;
  align-items: center;
  gap: var(--space--8);
  font-size: 0.8125rem;
  color: var(--text-color--secondary);
  flex-wrap: wrap;
}
.experiences_card-script {
  margin-left: auto;
  color: var(--color--neutral);
}

.experiences_card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}

.experiences_card-text {
  font-size: 0.875rem;
  line-height: 1.7;
}
.experiences_card-person {
  display: flex;
  align-items: center;
  gap: var(--space--12);
  margin-top: var(--space--4);
}
.experiences_card-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius--pill);
  object-fit: cover;
}
.experiences_card-person-body {
  display: flex;
  flex-direction: column;
}
.experiences_card-name {
  font-size: 0.8125rem;
  font-weight: 600;
}
.experiences_card-role {
  font-size: 0.75rem;
  color: var(--text-color--secondary);
}
.experiences_more {
  background-color: var(--color--white);
}

@media (max-width: 991px) {
  .faq_layout, .experiences_layout, .brochure_panel-inner { grid-template-columns: minmax(0, 1fr); }
  .experiences_promo {
    position: static;
  }
  .brochure_body {
    padding: var(--space--28);
  }
}

/* =============================================================
   61. Termin-Karte
   ============================================================= */
.event-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color--white);
  border-radius: var(--radius--medium);
  overflow: hidden;
  border: 0.0625rem solid var(--border-color--primary);
}

.event-card_media {
  border-radius: 0;
}
.event-card_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--12);
  padding: var(--space--24);
  text-align: center;
  flex: 1;
}

.event-card_title {
  font-size: 1.125rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}

.event-card_text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-color--secondary);
}

/* =============================================================
   62. Seiten-Hero / Bild-Hero / Intro / Text mit Bild
   ============================================================= */
.page-hero_content {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
  max-width: 46rem;
}
.page-hero_content.is-center {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.page-hero_text {
  color: var(--section-muted, var(--text-color--secondary));
}
.page-hero_chips {
  margin-top: var(--space--8);
}

.section_image-hero {
  position: relative;
}
.image-hero_inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.image-hero_bg {
  position: absolute;
  inset: 0;
}

.image-hero_overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(35, 46, 32, 0.4) 0%, rgba(35, 46, 32, 0.1) 45%, rgba(35, 46, 32, 0.6) 100%);
}

.image-hero_content-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--hero-min-height, 32.5rem);
  padding-top: calc(var(--nav--topbar-height) + 6rem);
  padding-bottom: var(--space--48);
}

.image-hero_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--16);
  max-width: 40rem;
  color: var(--color--white);
}

.image-hero_text {
  color: rgba(255, 255, 255, 0.88);
}

.intro-text_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--12);
  text-align: center;
}
.intro-text_script {
  color: var(--color--neutral-dark);
}
.intro-text_text {
  color: var(--section-muted, var(--text-color--secondary));
}

.text-image_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--16);
}
.text-image_text {
  color: var(--section-muted, var(--text-color--secondary));
}
.text-image_list {
  margin-top: var(--space--4);
}
.text-image_media {
  width: 100%;
}

.rich-text_wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space--20);
}

/* =============================================================
   63. USP-Leiste / Karten-Grid / Bild-Grid / Zitat
   ============================================================= */
.usp-bar_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space--24);
}

.usp-bar_item {
  display: flex;
  align-items: center;
  gap: var(--space--16);
}

.usp-bar_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--white);
  flex: none;
}

.usp-bar_icon-img {
  width: 1.375rem;
  height: 1.375rem;
  object-fit: contain;
}
.usp-bar_body {
  display: flex;
  flex-direction: column;
}
.usp-bar_title {
  font-size: 0.9375rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}
.usp-bar_text {
  font-size: 0.8125rem;
  color: var(--section-muted, var(--text-color--secondary));
}

.card-grid_list {
  --grid-columns: 3;
  --grid-columns-tablet: 2;
  --grid-columns-mobile: 1;
}
.card-grid_item {
  display: flex;
}
.card-grid_card {
  width: 100%;
  position: relative;
}
.card-grid_badge {
  position: absolute;
  top: var(--space--12);
  left: var(--space--12);
}
@media (hover: hover) {
  .card-grid_card:hover .card_title { color: var(--color--red);
  }
}

.image-grid_list {
  --grid-columns: 4;
  --grid-columns-tablet: 2;
  --grid-columns-mobile: 2;
}
.image-grid_item {
  display: flex;
  position: relative;
}
.image-grid_link {
  display: block;
  position: relative;
  width: 100%;
}

.image-grid_label {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space--20);
  color: var(--color--white);
  font-family: var(--font--script);
  font-size: 1.375rem;
  line-height: 1.4;
}

.quote_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--24);
  text-align: center;
}
.quote_icon {
  width: 2.5rem;
  height: 2.5rem;
  opacity: 0.5;
}

.quote_text {
  border: 0;
  padding: 0;
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: var(--tracking--heading);
  max-width: 42rem;
}

.quote_author {
  display: flex;
  align-items: center;
  gap: var(--space--12);
}
.quote_avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius--pill);
  object-fit: cover;
}
.quote_author-body {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.quote_name {
  font-size: 0.9375rem;
  font-weight: 600;
}
.quote_role {
  font-size: 0.8125rem;
  opacity: 0.8;
}

/* =============================================================
   64. Team / Meilensteine / Zertifikate
   ============================================================= */
.team_grid {
  --grid-columns: 4;
  --grid-columns-tablet: 2;
  --grid-columns-mobile: 1;
}
.team_item {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
}
.team_name {
  font-size: 1.125rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}
.team_role {
  font-size: 0.8125rem;
  color: var(--color--green);
  font-weight: 600;
}
.team_text {
  font-size: 0.875rem;
  color: var(--section-muted, var(--text-color--secondary));
}

.milestones_list {
  display: flex;
  flex-direction: column;
  gap: var(--space--40);
}

.milestones_item {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 16rem);
  gap: var(--space--32);
  align-items: center;
  padding-bottom: var(--space--40);
  border-bottom: 0.0625rem solid var(--section-border);
}

.milestones_item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.milestones_year {
  font-family: var(--font--script);
  font-size: 2.25rem;
  line-height: 1.2;
  color: var(--color--green);
}

.milestones_body {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
}
.milestones_title {
  font-size: var(--font-size--h5);
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}
.milestones_text {
  font-size: 0.9375rem;
  color: var(--section-muted, var(--text-color--secondary));
}

.certificates_grid {
  --grid-columns: 3;
  --grid-columns-tablet: 2;
  --grid-columns-mobile: 1;
}

.certificate-card {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
  height: 100%;
  padding: var(--space--28);
  border-radius: var(--radius--medium);
  background-color: var(--section-card-bg, var(--color--grey));
  align-items: center;
  text-align: center;
}

.certificate-card_img {
  width: auto;
  height: 4.5rem;
  object-fit: contain;
}
.certificate-card_title {
  font-size: 1.0625rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}
.certificate-card_text {
  font-size: 0.875rem;
  color: var(--section-muted, var(--text-color--secondary));
}

@media (max-width: 767px) {
  .milestones_item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space--16);
  }
}

/* =============================================================
   65. Kontakt & Formular-Erfolg
   ============================================================= */
.contact_layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--space--48);
  align-items: start;
}
.contact_intro {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
}
.contact_details {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
  margin-top: var(--space--8);
}
.contact_detail {
  display: flex;
  align-items: center;
  gap: var(--space--12);
}

.contact_detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--grey);
  flex: none;
}

.contact_detail-icon img {
  width: 1.125rem;
  height: 1.125rem;
  object-fit: contain;
}
.contact_detail-body {
  display: flex;
  flex-direction: column;
}
.contact_detail-title {
  font-size: 0.75rem;
  color: var(--section-muted, var(--text-color--secondary));
}
.contact_detail-value {
  font-size: 0.9375rem;
  font-weight: 600;
}

.contact_form-wrap {
  padding: var(--space--32);
  border-radius: var(--radius--medium);
  background-color: var(--color--grey);
}

.form_row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space--16);
}

.form-success_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--16);
  text-align: center;
}
.form-success_icon {
  width: 3.5rem;
  height: 3.5rem;
  color: var(--color--green);
}

@media (max-width: 991px) {
  .contact_layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .form_row {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact_form-wrap {
    padding: var(--space--20);
  }
}

/* =============================================================
   66. Rezepte-Hub
   ============================================================= */
.recipe-index_tools {
  margin-bottom: var(--space--32);
}
.recipe-index_grid {
  --grid-columns: 3;
  --grid-columns-tablet: 2;
  --grid-columns-mobile: 1;
}
.recipe-index_more {
  margin-top: var(--space--48);
}

.recipe-hero_layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space--48);
  align-items: center;
}
.recipe-hero_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--16);
}
.recipe-hero_text {
  color: var(--section-muted, var(--text-color--secondary));
}

.recipe-hero_meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space--16);
  width: 100%;
  padding: var(--space--20) 0;
  border-top: 0.0625rem solid var(--section-border);
  border-bottom: 0.0625rem solid var(--section-border);
}

.recipe-hero_meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.recipe-hero_meta-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color--green);
}
.recipe-hero_meta-label {
  font-size: 0.6875rem;
  color: var(--section-muted, var(--text-color--secondary));
}
.recipe-hero_meta-value {
  font-size: 0.9375rem;
  font-weight: 600;
}

.recipe-ingredients_groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space--32);
}
.recipe-ingredients_group {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
}
.recipe-ingredients_group-title {
  font-size: var(--font-size--h5);
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}
.recipe-ingredients_list {
  display: flex;
  flex-direction: column;
}

.recipe-ingredients_item {
  display: flex;
  align-items: baseline;
  gap: var(--space--12);
  padding: var(--space--12) 0;
  border-bottom: 0.0625rem solid var(--section-border);
  font-size: 0.9375rem;
}

.recipe-ingredients_amount {
  font-weight: 600;
  min-width: 4.5rem;
  flex: none;
}
.recipe-ingredients_name {
  flex: 1;
}
.recipe-ingredients_link {
  font-size: 0.75rem;
  color: var(--color--red);
  text-decoration: underline;
}

.recipe-steps_list {
  display: flex;
  flex-direction: column;
  gap: var(--space--32);
}

.recipe-steps_item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 14rem);
  gap: var(--space--24);
  align-items: start;
  padding-bottom: var(--space--32);
  border-bottom: 0.0625rem solid var(--section-border);
}

.recipe-steps_item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.recipe-steps_number {
  color: var(--color--green);
}
.recipe-steps_body {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
}
.recipe-steps_title {
  font-size: var(--font-size--h5);
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}
.recipe-steps_text {
  font-size: 0.9375rem;
  color: var(--section-muted, var(--text-color--secondary));
}

@media (max-width: 991px) {
  .recipe-hero_layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space--32);
  }
  .recipe-steps_item {
    grid-template-columns: 3rem minmax(0, 1fr);
  }
  .recipe-steps_media {
    grid-column: span 2;
  }
}

/* =============================================================
   67. Lexikon
   ============================================================= */
.lexicon-index_alphabet {
  margin-bottom: var(--space--32);
}
.lexicon-index_list {
  display: flex;
  flex-direction: column;
}

.lexicon-card {
  display: flex;
  align-items: center;
  gap: var(--space--20);
  padding: var(--space--20) 0;
  border-bottom: 0.0625rem solid var(--section-border);
  transition: padding-left var(--transition--fast);
}

@media (hover: hover) {
  .lexicon-card:hover {
    padding-left: var(--space--8);
  }
}

.lexicon-card_letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--green-light);
  color: var(--color--green);
  font-weight: 700;
  font-style: italic;
  flex: none;
}

.lexicon-card_body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}
.lexicon-card_title {
  font-size: 1.0625rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}
.lexicon-card_text {
  font-size: 0.875rem;
  color: var(--section-muted, var(--text-color--secondary));
}
.lexicon-card_icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  color: var(--color--red);
}

.lexicon-detail_wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space--20);
}

.lexicon-detail_letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--green-light);
  color: var(--color--green);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
}

.lexicon-detail_products {
  margin-top: var(--space--32);
  display: flex;
  flex-direction: column;
  gap: var(--space--24);
}

/* =============================================================
   68. Blog / Artikel
   ============================================================= */
.blog-index_featured {
  margin-bottom: var(--space--48);
}

.blog-index_featured-item {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space--32);
  align-items: center;
}

.blog-index_featured-media {
  display: block;
}
.blog-index_featured-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--12);
}
.blog-index_featured-text {
  color: var(--section-muted, var(--text-color--secondary));
}
.blog-index_tools {
  margin-bottom: var(--space--32);
}
.blog-index_grid {
  --grid-columns: 3;
  --grid-columns-tablet: 2;
  --grid-columns-mobile: 1;
}

.article-hero_wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--16);
}
.article-hero_media {
  width: 100%;
  margin-top: var(--space--12);
}
.article-content_body {
  font-size: 1.0625rem;
}

.article-content_share {
  display: flex;
  align-items: center;
  gap: var(--space--12);
  margin-top: var(--space--40);
  padding-top: var(--space--24);
  border-top: 0.0625rem solid var(--section-border);
  font-size: 0.875rem;
  font-weight: 600;
}

.article-content_share-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.related-articles_grid {
  --grid-columns: 3;
  --grid-columns-tablet: 2;
  --grid-columns-mobile: 1;
}

@media (max-width: 991px) {
  .blog-index_featured-item {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =============================================================
   69. Karriere / Jobs
   ============================================================= */
.job-index_list {
  display: flex;
  flex-direction: column;
}

.job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--20);
  padding: var(--space--24) 0;
  border-bottom: 0.0625rem solid var(--section-border);
  transition: padding-left var(--transition--fast);
}

@media (hover: hover) {
  .job-card:hover {
    padding-left: var(--space--8);
  }
}
.job-card_body {
  display: flex;
  flex-direction: column;
  gap: var(--space--4);
}
.job-card_title {
  font-size: var(--font-size--h5);
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}
.job-card_icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color--red);
  flex: none;
}
.job-index_empty {
  padding: var(--space--40) 0;
  color: var(--section-muted, var(--text-color--secondary));
}

.job-detail_layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space--48);
  align-items: start;
}
.job-detail_main {
  display: flex;
  flex-direction: column;
  gap: var(--space--20);
}
.job-detail_meta-icon {
  width: 1rem;
  height: 1rem;
}
.job-detail_intro {
  color: var(--section-muted, var(--text-color--secondary));
}
.job-detail_block {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
  margin-top: var(--space--16);
}
.job-detail_aside {
  position: sticky;
  top: var(--space--24);
}

.job-detail_card {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
  padding: var(--space--28);
  border-radius: var(--radius--medium);
  background-color: var(--color--grey);
}

.job-detail_contact {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
}
.job-detail_contact-item {
  display: flex;
  flex-direction: column;
}
.job-detail_contact-title {
  font-size: 0.75rem;
  color: var(--text-color--secondary);
}
.job-detail_contact-value {
  font-size: 0.875rem;
  font-weight: 600;
}

@media (max-width: 991px) {
  .job-detail_layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .job-detail_aside {
    position: static;
  }
}

/* =============================================================
   70. Downloads / Termine / Testimonials
   ============================================================= */
.downloads_tools, .event-index_tools { margin-bottom: var(--space--32); }
.downloads_grid {
  --grid-columns: 3;
  --grid-columns-tablet: 2;
  --grid-columns-mobile: 1;
}

.download-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--section-card-bg, var(--color--grey));
  border-radius: var(--radius--medium);
  overflow: hidden;
}

.download-card_media {
  border-radius: 0;
}
.download-card_body {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
  padding: var(--space--24);
  flex: 1;
}
.download-card_title {
  font-size: 1.0625rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}
.download-card_text {
  font-size: 0.875rem;
  color: var(--section-muted, var(--text-color--secondary));
}
.download-card_footer {
  padding: 0 var(--space--24) var(--space--24);
}

.event-index_grid {
  --grid-columns: 3;
  --grid-columns-tablet: 2;
  --grid-columns-mobile: 1;
}
.testimonial-index_grid {
  --grid-columns: 2;
  --grid-columns-tablet: 1;
  --grid-columns-mobile: 1;
}

/* =============================================================
   71. Rubriken (statisch)
   ============================================================= */
.guide-index_list {
  display: flex;
  flex-direction: column;
  gap: var(--space--24);
}
.guide-index_item {
  display: flex;
}

.guide-index_card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  min-height: 24rem;
  padding: var(--space--40);
  border-radius: var(--radius--medium);
  overflow: hidden;
  color: var(--color--white);
}

.guide-index_media {
  position: absolute;
  inset: 0;
}
.guide-index_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide-index_overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(35, 46, 32, 0.15) 0%, rgba(35, 46, 32, 0.72) 100%);
}

.guide-index_script {
  position: absolute;
  top: var(--space--32);
  left: var(--space--40);
  color: rgba(255, 255, 255, 0.9);
}
.guide-index_body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--12);
  max-width: 30rem;
}
.guide-index_title {
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}
.guide-index_text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.guide-index_button {
  margin-top: var(--space--8);
}

.guide-topics_grid {
  --grid-columns: 3;
  --grid-columns-tablet: 2;
  --grid-columns-mobile: 1;
}
.guide-topics_item {
  display: flex;
}
.guide-topics_card {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
  width: 100%;
}
.guide-topics_body {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
}
.guide-topics_title {
  font-size: var(--font-size--h5);
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}
.guide-topics_text {
  font-size: 0.875rem;
  color: var(--section-muted, var(--text-color--secondary));
}
@media (hover: hover) {
  .guide-topics_card:hover .guide-topics_title { color: var(--color--red);
  }
}

.guide-posts_list {
  display: flex;
  flex-direction: column;
}

.guide-posts_card {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: var(--space--32);
  align-items: center;
  padding: var(--space--24) 0;
  border-bottom: 0.0625rem solid var(--section-border);
}

.guide-posts_body {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
}
.guide-posts_date {
  font-size: 0.8125rem;
  color: var(--section-muted, var(--text-color--secondary));
}
.guide-posts_title {
  font-size: var(--font-size--h5);
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}
.guide-posts_text {
  font-size: 0.9375rem;
  color: var(--section-muted, var(--text-color--secondary));
}
@media (hover: hover) {
  .guide-posts_card:hover .guide-posts_title { color: var(--color--red);
  }
}

@media (max-width: 767px) {
  .guide-index_card {
    min-height: 20rem;
    padding: var(--space--24);
  }
  .guide-index_script {
    top: var(--space--20);
    left: var(--space--24);
  }
  .guide-posts_card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space--16);
  }
}

/* =============================================================
   72. Warenkorb
   ============================================================= */
.cart_layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space--48);
  align-items: start;
}
.cart_main {
  display: flex;
  flex-direction: column;
  gap: var(--space--24);
}
.cart_table {
  display: flex;
  flex-direction: column;
}

.cart_row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem 8rem;
  gap: var(--space--16);
  align-items: center;
  padding: var(--space--20) 0;
  border-bottom: 0.0625rem solid var(--border-color--primary);
}

.cart_row.is-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-color--secondary);
  padding: var(--space--8) 0;
}
.cart_product {
  display: flex;
  align-items: center;
  gap: var(--space--16);
}

.cart_image {
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
  background-color: var(--color--grey);
  border-radius: var(--radius--small);
  overflow: hidden;
}

.cart_image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cart_product-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.cart_product-name {
  font-size: 1rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}
.cart_product-variant {
  font-size: 0.8125rem;
  color: var(--text-color--secondary);
}
.cart_remove {
  font-size: 0.75rem;
  color: var(--text-color--secondary);
  margin-top: var(--space--4);
}

.cart_quantity {
  display: inline-flex;
  align-items: center;
  border: 0.0625rem solid var(--border-color--strong);
}
.cart_quantity-adjust {
  width: 2rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  .cart_quantity-adjust:hover {
    background-color: var(--color--grey);
  }
}
.cart_quantity-input {
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  border: 0;
  background: transparent;
}

.cart_price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-weight: 600;
}
.cart_price-compare {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-color--secondary);
  text-decoration: line-through;
}
.cart_empty {
  padding: var(--space--48) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--16);
}
.cart_note {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
}

.cart_summary {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
  padding: var(--space--28);
  border-radius: var(--radius--medium);
  background-color: var(--color--grey);
  position: sticky;
  top: var(--space--24);
}

.cart_summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--12);
  font-size: 0.9375rem;
}
.cart_summary-value {
  font-weight: 600;
}
.cart_summary-note {
  font-size: 0.75rem;
  color: var(--text-color--secondary);
}
.cart_trust {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
  margin-top: var(--space--8);
}
.cart_trust-item {
  display: flex;
  align-items: center;
  gap: var(--space--8);
  font-size: 0.75rem;
}
.cart_trust-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}
.cart_trust-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 991px) {
  .cart_layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .cart_summary {
    position: static;
  }
}

@media (max-width: 767px) {
  .cart_row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space--12);
  }
  .cart_row.is-header {
    display: none;
  }
  .cart_price {
    grid-column: 2;
  }
}

/* =============================================================
   73. Suche & Kollektionen-Liste & Fehlerseiten
   ============================================================= */
.search_head {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
  margin-bottom: var(--space--40);
  max-width: 40rem;
}
.search_form {
  display: flex;
  gap: var(--space--8);
}
.search_input {
  flex: 1;
  border-radius: 0;
}
.search_meta {
  font-size: 0.875rem;
  color: var(--text-color--secondary);
}
.search_grid {
  --grid-columns: 4;
  --grid-columns-tablet: 3;
  --grid-columns-mobile: 2;
}
.search_card {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
}
.search_card-media {
  background-color: var(--color--grey);
}
.search_card-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.search_card-type {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking--link);
  color: var(--text-color--secondary);
}
.search_card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}
.search_empty {
  padding: var(--space--48) 0;
  color: var(--text-color--secondary);
}

.collection-list_grid {
  --grid-columns: 3;
  --grid-columns-tablet: 2;
  --grid-columns-mobile: 1;
}
.collection-list_item {
  display: flex;
}

.error_wrap, .password_wrap, .gift_wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space--16); text-align: center; }
.error_code {
  color: var(--color--red);
}

.gift_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--16);
  padding: var(--space--40);
  border-radius: var(--radius--medium);
  background-color: var(--color--grey);
}

.gift_card-value {
  font-size: var(--font-size--h2);
  font-weight: 700;
  font-style: italic;
  letter-spacing: var(--tracking--heading);
}
.gift_card-qr {
  width: 9rem;
  height: 9rem;
}
.gift_card-code {
  font-family: ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: 0.1em;
}
.password_form {
  display: flex;
  gap: var(--space--8);
  width: 100%;
  max-width: 24rem;
}
.password_form .form_input {
  flex: 1;
  border-radius: 0;
}

/* =============================================================
   74. Pagination
   ============================================================= */
.pagination_component {
  display: flex;
  justify-content: center;
  margin-top: var(--space--48);
}
.pagination_list {
  display: flex;
  align-items: center;
  gap: var(--space--8);
}

.pagination_count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--space--8);
  border-radius: var(--radius--small);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color var(--transition--fast), color var(--transition--fast);
}

@media (hover: hover) {
  .pagination_count:hover {
    background-color: var(--color--grey);
  }
}

/* =============================================================
   75. Korrekturen: Bildhöhen in Full-Bleed-Layouts
   -------------------------------------------------------------
   `.media-frame_img { height: 100% }` braucht einen Container mit
   definierter Höhe — sonst bestimmt das Bild selbst die Höhe.
   ============================================================= */
.split-banner_media,
.social-media_card,
.testimonial-card_media,
.brochure_media {
  position: relative;
}

.split-banner_media {
  min-height: 23.5rem;
}

.split-banner_media > .media-frame_img,
.split-banner_media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-media_card {
  height: auto;
  aspect-ratio: 3 / 4;
}

.testimonial-card_media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 20rem;
}

.testimonial-card_media > .media-frame_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  .split-banner_media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 767px) {
  .testimonial-card_media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* Platzhalter-SVG im Builder nicht verzerren */
img[src="/images/placeholder.svg"] {
  object-fit: cover;
  background-color: var(--color--grey);
}

/* =============================================================
   76. Feinschliff
   ============================================================= */
.nav_logo-link {
  overflow: hidden;
}

@media (max-width: 991px) {
  .nav_logo-text {
    font-size: 1rem;
    line-height: 1;
  }
  .nav_logo-link {
    padding: var(--space--4);
    align-items: center;
  }
}

/* Sticky-Header darf den Hero-Overlay-Zustand nicht erben */
.section_navbar.is-stuck .nav_component {
  --header-bg: var(--color--white);
  --header-fg: var(--color--dark);
}

/* Formulare */
.form_input {
  width: 100%;
  padding: var(--space--12) var(--space--16);
  border: 0.0625rem solid var(--border-color--strong);
  border-radius: 0;
  background-color: var(--color--white);
  color: var(--color--dark);
  font-size: 0.9375rem;
  transition: border-color var(--transition--fast);
}

.form_input:focus {
  outline: 0;
  border-color: var(--color--green);
}
.form_input::placeholder {
  color: var(--color--neutral-light);
}
.form_input.is-text-area {
  min-height: 9rem;
  resize: vertical;
}

.form_field-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
}
.form_field-label {
  font-size: 0.8125rem;
  font-weight: 600;
}
.form_hidden-label {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.form_checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space--8);
  cursor: pointer;
}
.form_checkbox-icon {
  margin-top: 0.1875rem;
  accent-color: var(--color--green);
  flex: none;
}
.form_checkbox-label {
  line-height: 1.5;
}
.form_form {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
}

/* Tabellen-artige Nährwerte auch auf Mobil lesbar */
@media (max-width: 479px) {
  .nutrition_row {
    font-size: 0.8125rem;
  }
  .product-header_price {
    font-size: 1.375rem;
  }
}

/* Druckansicht für Rezepte */
@media print {
  .section_navbar, .section_footer, .section_newsletter-cta,
  .slider-nav, .recipe-hero_print { display: none !important; }
  .section_inner {
    padding-top: 0 !important;
    padding-bottom: var(--space--16) !important;
  }
}

/* Fokus-Sichtbarkeit */
a:focus-visible, button:focus-visible, .chip:focus-visible, .form_input:focus-visible {
  outline: 0.125rem solid var(--color--green);
  outline-offset: 0.125rem;
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Wrapper, die eine li-if-Bedingung von einem <img> mit li-settings:image tragen
   (Converter macht aus dem <img> ein image_tag und wuerde li-* als Parameter uebernehmen) */
.nav_logo-media {
  display: contents;
}
.collection-hero_bg-media {
  display: contents;
}

/* =============================================================
   77. Listen-Suche (Downloads, Lexikon)
   ============================================================= */
.list-search {
  display: flex;
  align-items: center;
  gap: var(--space--12);
  padding: var(--space--8) var(--space--8) var(--space--8) var(--space--16);
  margin-bottom: var(--space--24);
  border: 0.0625rem solid var(--section-border, var(--border-color--primary));
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  flex-wrap: wrap;
}

.list-search_icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--color--neutral);
}

.list-search_input {
  flex: 1;
  min-width: 10rem;
  border: 0;
  background: transparent;
  font-size: 1rem;
  padding: var(--space--8) 0;
  color: var(--color--dark);
}

.list-search_input:focus {
  outline: 0;
}
.list-search_input::placeholder {
  color: var(--color--neutral-light);
}

.list-search_empty {
  width: 100%;
  padding: var(--space--8) 0 0;
  font-size: 0.875rem;
  color: var(--text-color--secondary);
}

/* Kontaktformular: Select wie ein Input */
.contact_form-wrap select.form_input {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) 50%, calc(100% - 0.75rem) 50%;
  background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
  background-repeat: no-repeat;
  padding-right: var(--space--40);
}

/* =============================================================
   78. Full-Bleed-Hintergründe ohne gesetztes Bild
   -------------------------------------------------------------
   Ohne Bild rendert die Section jetzt gar kein <img> mehr. Damit
   heller Text nicht auf Weiß steht, tragen die Medien-Container
   eine Markenfarbe als Grundton.
   ============================================================= */
.full-bleed-media {
  display: contents;
}

.hero-slider_media,
.image-hero_bg,
.brand-world_bg,
.newsletter-cta_bg,
.product-why_bg,
.collection-hero_bg {
  background-color: var(--color--dark);
  background-image: linear-gradient(150deg, var(--color--green-dark) 0%, var(--color--dark) 65%);
}

.guide-slider_card,
.guide-index_card {
  background-color: var(--color--green-dark);
}

/* Produkt-Warum steht auf hellem Grund — dort reicht ein ruhiges Grau */
.product-why_bg {
  background-image: linear-gradient(150deg, var(--color--grey-dark) 0%, var(--color--neutral-lighter) 100%);
}

/* Platzhalter nur noch dort zeigen, wo eine Fläche sonst kollabiert */
.media-frame img[src$="placeholder.svg"] {
  object-fit: contain;
  padding: 12%;
  opacity: 0.35;
}

/* =============================================================
   79. Icon-Größen pro Kontext
   -------------------------------------------------------------
   Klassen auf dem li-snippet-Element überleben die Konvertierung
   nicht — die Größe muss vom Elternelement kommen.
   ============================================================= */
.star-rating_track > svg,
.star-rating_fill > svg {
  width: 1rem;
  height: 1rem;
}

.nav_shop-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.dropdown-icon > svg {
  width: 0.5rem;
  height: 0.5rem;
}
.nav_mega-rail-icon > svg {
  width: 0.875rem;
  height: 0.875rem;
}
.nav_drawer-icon > svg {
  width: 1rem;
  height: 1rem;
}
.nav_dropdown-close-icon > svg {
  width: 0.875rem;
  height: 0.875rem;
}
.li-lang_dd-toggle-icon > svg {
  width: 0.625rem;
  height: 0.625rem;
}
.menu-icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.button > svg {
  width: 1rem;
  height: 1rem;
}
.chip > svg {
  width: 0.875rem;
  height: 0.875rem;
}
.slider-nav_button > svg {
  width: 1.125rem;
  height: 1.125rem;
}
.social-media_next > svg {
  width: 1.125rem;
  height: 1.125rem;
}

.accordion_icon > svg {
  width: 1rem;
  height: 1rem;
}
.accordion_icon-circle > svg {
  width: 0.75rem;
  height: 0.75rem;
}
.check-list_icon > svg {
  width: 1.25rem;
  height: 1.25rem;
}
.meta-row > svg {
  width: 1rem;
  height: 1rem;
}
.list-search_icon > svg {
  width: 1.25rem;
  height: 1.25rem;
}

.product-item_favorite > svg,
.product-header_favorite > svg {
  width: 1.5rem;
  height: 1.5rem;
}
.product-header_cross-add > svg {
  width: 1.125rem;
  height: 1.125rem;
}
.product-header_shipping-icon > svg {
  width: 1rem;
  height: 1rem;
}
.recipe-hero_meta-icon > svg {
  width: 1.125rem;
  height: 1.125rem;
}
.job-detail_meta-icon > svg {
  width: 1rem;
  height: 1rem;
}

.lexicon-card > svg,
.job-card > svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--color--red);
}

.quote_icon > svg {
  width: 2.5rem;
  height: 2.5rem;
}
.form-success_icon > svg {
  width: 3.5rem;
  height: 3.5rem;
}
.article-content_share-icon > svg {
  width: 1.25rem;
  height: 1.25rem;
}
.social-media_play > svg {
  width: 3rem;
  height: 3rem;
}
.brand-world_link-icon > svg {
  width: 0.875rem;
  height: 0.875rem;
}
.footer_social-link > svg {
  width: 1rem;
  height: 1rem;
}
.contact_detail-icon > svg {
  width: 1.125rem;
  height: 1.125rem;
}
.usp-bar_icon > svg {
  width: 1.375rem;
  height: 1.375rem;
}
.cart_trust-icon > svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* =============================================================
   80. Korrekturen aus dem Live-Abgleich
   -------------------------------------------------------------
   Swipers Stylesheet wird zur Laufzeit ans Ende des <head> gehaengt
   und gewinnt bei gleicher Spezifitaet. Alles, was .swiper-slide
   betrifft, braucht deshalb zwei Klassen.
   ============================================================= */

/* --- 1) Chevron in der Navigation saubert zentrieren --- */
.dropdown-icon,
.nav_mega-rail-icon,
.nav_drawer-icon,
.li-lang_dd-toggle-icon,
.list-search_icon,
.check-list_icon,
.product-header_shipping-icon,
.recipe-hero_meta-icon,
.job-detail_meta-icon,
.brand-world_link-icon,
.article-content_share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.dropdown-icon svg,
.nav_mega-rail-icon svg,
.nav_drawer-icon svg,
.li-lang_dd-toggle-icon svg,
.meta-row svg,
.chip svg,
.button svg {
  display: block;
  vertical-align: top;
}

.nav_dropdown-toggle {
  align-items: center;
}

/* --- 2) Hero: Inhalt bleibt unten, kein Sprung beim Laden --- */
.hero-slider_swiper .swiper-slide.hero-slider_slide {
  display: flex;
  align-items: flex-end;
  min-height: var(--hero-min-height, 43.75rem);
  height: auto;
}

/* Vor dem Swiper-Init nur den ersten Slide zeigen — verhindert das Umspringen */
.hero-slider_swiper:not(.swiper-initialized) .swiper-wrapper { display: block; }
.hero-slider_swiper:not(.swiper-initialized) .swiper-slide + .swiper-slide { display: none; }

/* --- 5) Slider duerfen nach rechts aus dem Raster laufen --- */
.section_inner .swiper.is-bleed,
.section_inner .recipe-slider_swiper,
.section_inner .product-slider_swiper,
.section_inner .social-media_swiper,
.section_inner .guide-slider_swiper,
.section_inner .news-slider_swiper,
.section_inner .reviews_swiper,
.section_inner .testimonial-slider_swiper,
.section_inner .event-slider_swiper,
.section_inner .recommended_swiper {
  overflow: visible;
}

/* Gekappt wird erst am Seitenrand */
.page-wrapper {
  overflow-x: clip;
}

/* Slider-Hoehen nicht von Swiper diktieren lassen */
.section_inner .swiper-slide {
  height: auto;
}

/* Navigation liegt jetzt in jedem Tab-Pane */
.product-slider_tab .slider-nav {
  margin-top: var(--space--32);
}
.product-slider_tab:not(.is-active) .slider-nav { display: none; }

/* metafield_tag umschliesst Rich Text mit <div class="metafield-rich_text_field"> —
   transparent halten, damit die vorhandenen Rich-Text-Regeln unveraendert greifen */
.metafield-rich_text_field {
  display: contents;
}

/* Bedingungs-Wrapper: li-if muss laut Builder allein auf seinem Element stehen.
   display:contents haelt den Wrapper aus dem Layout heraus, das innere Element
   bleibt Flex-/Grid-Kind seines urspruenglichen Elternteils. */
.li-guard {
  display: contents;
}

/* =============================================================
   81. Produkt-Header: Blockbereich an das Design angleichen
   -------------------------------------------------------------
   Die drei Blocktypen (Eigenschaft, Ergebnis-Bild, Anker-Link)
   liegen in EINEM li-cf-theme-blocks-Wrapper — mehr erlaubt der
   Builder nicht. Im Design stehen sie aber an drei Stellen:
   Siegel unter den Buttons, Ergebnis-Bilder unter "Your journeys",
   Anker-Chips ganz unten. Deshalb loest der Wrapper sich per
   display:contents auf und die rechte Spalte ordnet die Gruppen
   per order — jede Gruppe bekommt ihre eigene Zeile, weil alle
   uebrigen Kinder ueber die volle Breite laufen.
   ============================================================= */

.product-header_details {
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: var(--space--20) var(--space--24);
}

.product-header_details > * {
  flex: 0 0 100%;
}
/* Kinder von display:contents-Wrappern (.li-guard) sind selbst Flex-Item */
.product-header_results-title,
.product-header_cross,
.product-header_accordion { flex: 0 0 100%; }

.product-header_blocks {
  display: contents;
}

.product-header_title-row {
  order: 1;
}
.product-header_rating {
  order: 2;
}
.product-header_intro {
  order: 3;
}
.product-header_benefits {
  order: 4;
}
.product-header_buy,
.product-header_dealer-note { order: 5; }
.product-header_icon-item {
  order: 6;
}
.product-header_results-title {
  order: 7;
}
.product-header_result {
  order: 8;
}
.product-header_accordion {
  order: 9;
}
.product-header_cross {
  order: 10;
}
.product-header_anchor-item {
  order: 11;
}

/* --- Siegel: gerundete Kontur, Icon und Beschriftung INNEN --- */
.product-header_icon-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space--4);
  width: 3.125rem;
  height: 3.5rem;
  padding: var(--space--4);
  border: 0.0625rem solid var(--section-accent, var(--color--green));
  border-radius: 1.5rem;
  color: var(--section-accent, var(--color--green));
}

/* Die Kontur sitzt jetzt aussen — der innere Kreis traegt nur noch das Icon */
.product-header_icon-circle {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
}

.product-header_icon-img {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.product-header_icon-label {
  font-size: 0.4375rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  color: inherit;
}

/* Siegelreihe mittig — wie im Design */
.product-header_icon-item:first-child {
  margin-left: auto;
}
.product-header_icon-item:not(:has(+ .product-header_icon-item)) { margin-right: auto; }

/* --- Ergebnis-Bilder: Reihe hochformatiger Kacheln --- */
.product-header_result {
  flex: 1 1 0;
  min-width: 0;
}

.product-header_result-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius--small);
}

/* --- Anker-Chips: Reihe am Fuss der Spalte --- */
.product-header_anchor-item {
  flex: 0 0 auto;
}
.product-header_details > .product-header_blocks + * {
  margin-top: 0;
}

/* --- Akkordeon: geschlossen zeigt das Chevron nach rechts --- */
.product-header_accordion .accordion_item .accordion_icon {
  transform: rotate(-90deg);
}
.product-header_accordion .accordion_item.is-open .accordion_icon {
  transform: rotate(0deg);
}
.product-header_accordion .accordion_title {
  font-style: italic;
  font-weight: 700;
}

@media (max-width: 767px) {
  .product-header_details {
    gap: var(--space--16) var(--space--16);
  }
  .product-header_icon-item:first-child,
  .product-header_icon-item:not(:has(+ .product-header_icon-item)) { margin-left: 0; margin-right: 0; }
}

/* =============================================================
   82. Designer-Feedback vom 2.9. (Cosima) — Startseite
   ============================================================= */

/* --- Top-Bar: 34px bei 1440px, hellgrauer Grund (Figma 3329:24496) --- */
.nav_topbar {
  background-color: var(--color--grey);
  border-bottom: 0;
}

.nav_topbar-inner {
  min-height: var(--nav--topbar-height);
  padding-top: 0;
  padding-bottom: 0;
}

/* --- Externer-Link-Pfeil neben Top-Bar-Links --- */
.nav_topbar-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space--4);
}

.nav_topbar-external {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  line-height: 0;
}

/* --- Logo: hochgeladenes Bild fuellt die 140x127-Flaeche --- */
.nav_logo-link {
  padding: 0;
  align-items: center;
}

.nav_logo-img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

/* --- Hero: Abstand zwischen Text und Buttons verringern.
       Die Inhaltsspalte hat 28px Grundabstand; die Buttongruppe rueckt naeher. --- */
.hero-slider_content .button-group {
  margin-top: calc(-1 * var(--space--12));
}

/* --- Kategorie-Kacheln: 308x276 bei 1440px, waechst mit dem Text (Figma 11124-20313).
       Inhalt oben ausgerichtet, damit Icons und Titel ueber alle Kacheln
       auf einer Linie liegen — auch wenn ein Titel zweizeilig umbricht. --- */
.category-tile {
  justify-content: flex-start;
  min-height: 17.25rem;
  padding: var(--space--48) var(--space--24) var(--space--32);
  gap: var(--space--32);
}
.category-tile_icon {
  flex: none;
  height: 5.625rem;
}
.category-tile_content {
  gap: var(--space--8);
}
.category-tile .meta-row {
  column-gap: var(--space--8);
  row-gap: 0;
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: 0;
}
.category-tile .meta-row_dot {
  width: 0.25rem;
  height: 0.25rem;
}
/* Kachel fuellt ihre Grid-Zelle (der Link ist Flex-Kind des Items) */
.category-tiles_item {
  min-width: 0;
}
.category-tile {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* Mobil (Figma 11124-20312): eine Spalte, 4 gleich hohe Zeilen,
   Icon links, Text linksbuendig, vertikal mittig */
@media (max-width: 767px) {
  .category-tiles_grid {
    --grid-gap: var(--space--8);
    grid-auto-rows: 1fr;
  }
  .category-tile {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 6.25rem;
    padding: var(--space--20);
    gap: var(--space--16);
    text-align: left;
  }
  .category-tile_icon {
    height: 3.75rem;
    width: 2.75rem;
  }
  .category-tile_content {
    align-items: flex-start;
    gap: var(--space--4);
    min-width: 0;
  }
  .category-tile_title {
    font-size: 1.5rem;
    line-height: 1.2;
  }
  .category-tile .meta-row {
    justify-content: flex-start;
    column-gap: 0.375rem;
    font-size: 0.8125rem;
  }
}

/* --- Section-Eyebrow: 17px, Semibold Italic, 120%, kein Letter-Spacing --- */
.section-head_eyebrow {
  font-size: var(--font-size--h6);
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

/* --- Produkt-Slider: Promo-Handschrift zentriert auf hellem Block --- */

.product-slider_promo-heading {
  font-size: var(--font-size--h4);
  line-height: 1.1;
}

/* --- Tabs: Unterstrich naeher an den Text, in Dunkelgruen --- */
.tabs_link {
  padding-bottom: var(--space--4);
  padding-top: var(--space--8);
}

.tabs_link.is-active {
  color: var(--color--dark);
  border-bottom-color: var(--color--dark);
}

/* --- Produktkachel: ohne Rahmen, mit Schlagschatten --- */
.product-item_component {
  border: 0;
  box-shadow: var(--shadow--sm);
}

.product-item_image-wrapper {
  border: 0;
}

/* --- Produkt-Tag: buendig in der oberen linken Ecke --- */
.product-item_tag_list {
  position: absolute;
  top: var(--space--12);
  left: 0;
  z-index: 2;
}

/* Farbe folgt der Produktkategorie (Zuordnung aus dem Kommentar) */
.product-item_tag {
  background-color: var(--cat--food);
  color: var(--color--white);
}
.product-item_tag[data-cats~="basische-koerperpflege"] { background-color: var(--cat--care); }
.product-item_tag[data-cats~="basische-accessoires"]   { background-color: var(--cat--accessories); }

/* --- Rubriken-Slider: Textspalte bricht bei 368px um --- */
.guide-slider_body {
  max-width: 23rem;
}

/* =============================================================
   83. Designer-Feedback vom 3.9. (Cosima) + Jonas
   ============================================================= */

/* --- Laufband: eigener Grundton, randlos, Schrift laut Design --- */
.section_script-ticker .section_inner {
  background-color: #f7f7f7;
}
.section_script-ticker .padding-global {
  padding-left: 0;
  padding-right: 0;
}

.script-ticker_item .heading-style-script {
  font-size: 2.5rem;
  line-height: 1.66;
  letter-spacing: 0.002em;
}

/* --- Produkt-Slider: Promo-Kachel auf Höhe der Produktkacheln --- */
.product-slider_swiper .swiper-slide {
  height: auto;
}
.product-slider_promo {
  display: flex;
}

/* --- Rezepte-Slider: läuft nach rechts hinaus, links sauber abgeschnitten,
       damit er nicht mehr über Überschrift und Text wandert --- */
.section_inner .recipe-slider_swiper {
  overflow: visible;
  clip-path: inset(-2rem -100vw -2rem -1rem);
}

/* --- Social Media: gleiche Höhe, Hochformat 9:16, 2px Abstand --- */
.social-media_track .swiper-slide {
  height: auto;
}

.social-media_card {
  aspect-ratio: 9 / 16;
  height: auto;
}

.social-media_card .media-frame_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Produkt-Header: Bereich „Your journeys" vorerst aus --- */
.product-header_results-title,
.product-header_result { display: none; }

/* --- Produkt Warum: Bild bleibt beim Öffnen des Akkordeons stehen ---
   Vorher spannte der Hintergrund über die volle Höhe des Inhalts (inset: 0),
   also skalierte er beim Aufklappen mit — das wirkte wie ein Zoom. Jetzt hat
   er eine feste Höhe, und die grüne Box wächst notfalls darüber hinaus. */
.product-why_bg {
  inset: 0 0 auto 0;
  height: var(--why-min-height, 37.5rem);
}

.product-why_content-wrap {
  align-items: flex-start;
}

.product-why_panel {
  border-radius: var(--radius--medium);
}

/* --- Sidecard: die Akkordeons im Produkt-Header öffnen als rechter Drawer --- */
.sidecard_backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background-color: rgba(35, 46, 32, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition--base), visibility var(--transition--base);
}

body.sidecard-open .sidecard_backdrop {
  opacity: 1;
  visibility: visible;
}
body.sidecard-open {
  overflow: hidden;
}

.product-header_accordion .accordion_panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  width: min(30rem, 100%);
  padding: var(--space--40);
  background-color: var(--color--white);
  box-shadow: var(--shadow--md);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transition--base);
  grid-template-rows: none;
}

.product-header_accordion .accordion_item.is-open .accordion_panel {
  transform: none;
}

.product-header_accordion .accordion_panel .accordion_content {
  overflow: visible;
  padding-bottom: var(--space--24);
}

.sidecard_close {
  position: absolute;
  top: var(--space--20);
  right: var(--space--20);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius--pill);
  border: 0.0625rem solid var(--border-color--primary);
  background-color: var(--color--white);
  font-size: 1.125rem;
  line-height: 1;
  color: var(--color--dark);
  cursor: pointer;
}

@media (hover: hover) {
  .sidecard_close:hover {
    background-color: var(--color--grey);
  }
}

.sidecard_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--12);
  margin-top: auto;
  padding-top: var(--space--24);
}

.sidecard_nav-btn {
  padding: var(--space--8) var(--space--16);
  border-radius: var(--radius--pill);
  border: 0.0625rem solid var(--border-color--primary);
  background-color: var(--color--white);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color--dark);
  cursor: pointer;
  white-space: nowrap;
}

@media (hover: hover) {
  .sidecard_nav-btn:hover {
    background-color: var(--color--grey);
  }
}
.sidecard_nav-btn.is-next {
  margin-left: auto;
}

@media (max-width: 479px) {
  .product-header_accordion .accordion_panel {
    padding: var(--space--24);
  }
}

/* =============================================================
   84. Preise vorerst ausgeblendet
   -------------------------------------------------------------
   Entscheidung vom 3.9.: die Produkte sind derzeit nicht zum Kauf
   gedacht, Preise sollen per Voreinstellung nicht erscheinen.

   Der eigentliche Schalter im Theme ist das Produkt-Metafeld
   custom.is_purchasable — daran haengen alle 16 Preisausgaben. Der
   steht aber auf den Produkten noch auf "wahr", und das laesst sich
   nur ueber die Shopify-API umstellen, die gerade nicht erreichbar
   ist. Theme-Einstellungen scheiden aus, weil der Converter
   config/settings_schema.json bei jeder Konvertierung neu schreibt.

   Deshalb hier: dieser Block ist die Voreinstellung. Sobald Preise
   wieder gezeigt werden sollen, reicht es, ihn zu loeschen — die
   is_purchasable-Logik darunter ist unveraendert und uebernimmt dann
   wieder pro Produkt.
   ============================================================= */
.product-item_price,
.product-header_price-wrapper,
.product-header_tax-note,
.product-header_shipping,
.product-header_cross-price,
.predictive-search_product-info .text-size-small {
  display: none;
}

/* --- Social Media: 2px Abstand auch zwischen Promo-Kachel und erster Bildkachel --- */
.social-media_layout {
  gap: 0.125rem;
}

.product-slider_headline-wrapper {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top: var(--space--4);
  position: relative;
}

.product-slider_headline-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 7.5rem;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.21);
  pointer-events: none;
}

/* Die Handschrift liegt ueber dem Block und ragt seitlich hinaus
   (Design: Block 120px, Text 182px — also je 31px Ueberstand). */
.product-slider_headline-wrapper .heading-style-script {
  position: relative;
  white-space: nowrap;
  font-size: 1.75rem;
}

/* --- Promo-Handschrift: Design-Werte zuletzt, damit sie eine spaetere
       Canvas-Bearbeitung des Wrappers nicht ueberschreibt --- */
.product-slider_headline-wrapper {
  align-self: center;
  align-items: center;
  justify-content: flex-end;
  min-height: 6.25rem;
  padding-bottom: 0.625rem;
}

/* =============================================================
   85. Navigation Mobil/Tablet (Figma 11124-123)
   -------------------------------------------------------------
   Links Burger + Merkliste, Logo mittig unter der Top-Bar und
   unten ueberstehend (122x110), rechts Suche, Konto, Warenkorb.
   nav_right/nav_shop-icons loesen sich per display:contents auf,
   damit die Icons direkt per order im Container stehen; das
   ::after ist der Abstandshalter zwischen linker und rechter Gruppe.
   ============================================================= */
@media (max-width: 991px) {
  .nav_container {
    justify-content: flex-start;
    gap: var(--space--20);
    min-height: 4.625rem;
  }
  .nav_container::after {
    content: "";
    flex: 1;
    order: 3;
  }
  .nav_right,
  .nav_shop-icons {
    display: contents;
  }
  .nav_menu-button { order: 1; }
  .nav_shop-icon.is-wishlist { order: 2; }
  .nav_search-holder { order: 4; }
  .nav_account { order: 5; }
  .nav_cart-holder { order: 6; }
  .nav_logo-link {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6.1rem;
    height: 5.5rem;
    padding: 0;
    order: 0;
  }
  .nav_logo-img {
    max-height: none;
  }
  .nav_shop-icon .icon-svg,
  .nav_shop-icon .icon-embed-xsmall {
    width: 1.5rem;
    height: 1.5rem;
  }
}

@media (max-width: 767px) {
  /* Drei Icons rechts muessen neben das 122px-Logo passen */
  .nav_container {
    gap: var(--space--12);
  }
  /* Ankuendigung einzeilig wie im Design */
  .nav_topbar-announcement {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* =============================================================
   86. Navigation Desktop: Link-Boxen, offenes Mega-Menue
   (Figma 11200-17880 / 11200-18103 / 11200-18004)
   ============================================================= */

/* Link-Box: volle Nav-Hoehe, Innenabstand links/rechts statt Gap */
.nav_container {
  padding-top: 0;
  padding-bottom: 0;
  align-items: stretch;
}
.nav_menu,
.nav_right,
.nav_shop-icons {
  align-items: stretch;
}
.nav_menu {
  gap: 0;
}
.nav_menu.is-left {
  margin-left: calc(-1 * 0.5625rem);
}
.nav_menu.is-right {
  margin-right: calc(-1 * 0.5625rem);
}
.nav_menu-dropdown {
  display: flex;
}
.nav_dropdown-toggle {
  align-items: center;
  padding: 0 0.5625rem;
}
.nav_link {
  display: flex;
  align-items: center;
  align-self: stretch;
}
.nav_right,
.nav_shop-icons,
.nav_search-holder,
.nav_account,
.nav_cart-holder,
.nav_menu-button {
  align-items: center;
}
.nav_dropdown-toggle:focus-within {
  outline: none;
}
.nav_link:focus-visible {
  outline: none;
}
.nav_dropdown-toggle:has(.nav_link:focus-visible) {
  outline: 0.125rem solid currentColor;
  outline-offset: -0.125rem;
}

/* Logo liegt ueber dem offenen Panel */
.nav_logo-link {
  z-index: 30;
}

/* Offenes Panel: kein Querscroll durch die weisse Schiene, Seite abgedunkelt */
.nav_dropdown-list {
  overflow-x: hidden;
  border-top: 0.0625rem solid var(--border-color--primary);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4);
  clip-path: inset(0 -100vw -100vh -100vw);
}

/* Offen: aktiver Punkt dunkel, die anderen gedimmt */
.nav_component:has(.nav_menu-dropdown.is-open .nav_dropdown-list) .nav_menu-dropdown:not(.is-open) .nav_dropdown-toggle,
.nav_component.is-dropdown-open .nav_menu-dropdown:not(.is-open) .nav_dropdown-toggle {
  color: var(--text-color--secondary);
}

@media (max-width: 991px) {
  .nav_container {
    align-items: center;
  }
}

/* =============================================================
   87. Keine leeren Buttons
   -------------------------------------------------------------
   Buttons mit Text- und Link-Setting werden per li-if nur ausgegeben,
   wenn beides gefuellt ist. Das hier ist das Netz fuer den Rest:
   ohne Text oder mit leerem Link (Shopify gibt ein leeres url-Setting
   als href="" aus) wird ein Button nicht angezeigt.
   ============================================================= */
.button:has(> span:empty):not(:has(svg, img)),
.button:empty,
a.button[href=""]:not([x-on\:click]):not([onclick]) {
  display: none;
}
.button-group:not(:has(.button:not(:empty))) {
  display: none;
}

/* =============================================================
   88. Buttons: Breite nach Inhalt, erst Mobil hoch volle Breite
   -------------------------------------------------------------
   Bis 480px (auch Mobil quer) sind Buttons so breit wie ihr Text,
   wie auf Desktop. Darunter stehen sie untereinander und laufen
   ueber die volle Breite — in jeder Section.
   ============================================================= */
@media (max-width: 479px) {
  .button-group,
  .section-head_actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .button-group .button:not(.is-link),
  .section-head_actions .button:not(.is-link) {
    width: 100%;
  }
  .button-group .button.is-link,
  .section-head_actions .button.is-link {
    align-self: flex-start;
  }
  .hero-slider_content {
    align-items: stretch;
  }
}

/* =============================================================
   89. Textbreite per Customizer (data-number)
   -------------------------------------------------------------
   Jede Section hat die Regler "Breite Ueberschrift" und "Breite Text"
   (Zeichen). Der Wert landet als data-number auf einem Wrapper um
   Ueberschrift bzw. Text; der Wrapper selbst ist display:contents und
   veraendert kein Layout. Die Breite greift am Kind, damit 1ch sich
   auf dessen eigene Schriftgroesse bezieht.
   0 (bzw. -1) = keine eigene Breite, es gilt die Standardbreite.
   ============================================================= */
[data-number="-1"]{--number: initial;} [data-number="0"]{--number: initial;} [data-number="1"]{--number:1} [data-number="2"]{--number:2} [data-number="3"]{--number:3} [data-number="4"]{--number:4} [data-number="5"]{--number:5} [data-number="6"]{--number:6} [data-number="7"]{--number:7} [data-number="8"]{--number:8}
[data-number="9"]{--number:9} [data-number="10"]{--number:10} [data-number="11"]{--number:11} [data-number="12"]{--number:12} [data-number="13"]{--number:13} [data-number="14"]{--number:14} [data-number="15"]{--number:15} [data-number="16"]{--number:16} [data-number="17"]{--number:17} [data-number="18"]{--number:18}
[data-number="19"]{--number:19} [data-number="20"]{--number:20} [data-number="21"]{--number:21} [data-number="22"]{--number:22} [data-number="23"]{--number:23} [data-number="24"]{--number:24} [data-number="25"]{--number:25} [data-number="26"]{--number:26} [data-number="27"]{--number:27} [data-number="28"]{--number:28}
[data-number="29"]{--number:29} [data-number="30"]{--number:30} [data-number="31"]{--number:31} [data-number="32"]{--number:32} [data-number="33"]{--number:33} [data-number="34"]{--number:34} [data-number="35"]{--number:35} [data-number="36"]{--number:36} [data-number="37"]{--number:37} [data-number="38"]{--number:38}
[data-number="39"]{--number:39} [data-number="40"]{--number:40} [data-number="41"]{--number:41} [data-number="42"]{--number:42} [data-number="43"]{--number:43} [data-number="44"]{--number:44} [data-number="45"]{--number:45} [data-number="46"]{--number:46} [data-number="47"]{--number:47} [data-number="48"]{--number:48}
[data-number="49"]{--number:49} [data-number="50"]{--number:50} [data-number="51"]{--number:51} [data-number="52"]{--number:52} [data-number="53"]{--number:53} [data-number="54"]{--number:54} [data-number="55"]{--number:55} [data-number="56"]{--number:56} [data-number="57"]{--number:57} [data-number="58"]{--number:58}
[data-number="59"]{--number:59} [data-number="60"]{--number:60} [data-number="61"]{--number:61} [data-number="62"]{--number:62} [data-number="63"]{--number:63} [data-number="64"]{--number:64} [data-number="65"]{--number:65} [data-number="66"]{--number:66} [data-number="67"]{--number:67} [data-number="68"]{--number:68}
[data-number="69"]{--number:69} [data-number="70"]{--number:70} [data-number="71"]{--number:71} [data-number="72"]{--number:72} [data-number="73"]{--number:73} [data-number="74"]{--number:74} [data-number="75"]{--number:75} [data-number="76"]{--number:76} [data-number="77"]{--number:77} [data-number="78"]{--number:78}
[data-number="79"]{--number:79} [data-number="80"]{--number:80} [data-number="81"]{--number:81} [data-number="82"]{--number:82} [data-number="83"]{--number:83} [data-number="84"]{--number:84} [data-number="85"]{--number:85} [data-number="86"]{--number:86} [data-number="87"]{--number:87} [data-number="88"]{--number:88}
[data-number="89"]{--number:89} [data-number="90"]{--number:90} [data-number="91"]{--number:91} [data-number="92"]{--number:92} [data-number="93"]{--number:93} [data-number="94"]{--number:94} [data-number="95"]{--number:95} [data-number="96"]{--number:96} [data-number="97"]{--number:97} [data-number="98"]{--number:98}
[data-number="99"]{--number:99} [data-number="100"]{--number:100}

.u-text-width {
  display: contents;
}
.u-text-width:not([data-number="0"]):not([data-number="-1"]):not([data-number=""]) > * {
  max-width: calc(var(--number) * 1ch) !important;
}
/* Eine feste Maximalbreite des direkten Eltern-Containers aufheben,
   sobald eine eigene Breite gesetzt ist */
:has(> .u-text-width:not([data-number="0"]):not([data-number="-1"]):not([data-number=""])) {
  max-width: none;
}
/* Zentrierte Inhalte bleiben zentriert (alle Container mit text-align:center) */
:is(.is-center, .awards_title, .blog_cms-empty, .brand-world_content, .brand-world_quote, .button, .cart_empty, .cart_quantity, .cart_quantity-input, .category-tile, .certificate-card, .collection-products_empty, .error_wrap, .event-card_body, .experiences_promo-inner, .faq_promo-inner, .filter_empty, .filter_headline, .form-success_wrap, .form_input.is-quantity, .gift_wrap, .ingredients_item, .intro-text_wrap, .mini-cart_line-item_quantity-adjust, .nav_logo-text, .nav_mega-more, .nav_shop-quantity, .newsletter-cta_content, .page-hero_content.is-center, .password_wrap, .product-header_icon-label, .product-header_story-body, .product-item_body, .product-slider_headline-wrapper, .product-slider_promo-body, .product-steps_item, .product-why_panel, .quote_wrap, .recipe-card_body, .reviews_card, .reviews_promo, .section-head.is-center, .social-media_promo, .split-banner_panel, .text-align-center, .trust-bar_inner, .yield_item) .u-text-width > * {
  margin-left: auto;
  margin-right: auto;
}
/* Absatzabstand wie vor dem Wrapper: nur der letzte Wrapper setzt 0 */
.u-text-width > p:last-child {
  margin-bottom: var(--space--12);
}
.u-text-width:last-child > p:last-child {
  margin-bottom: 0;
}

/* =============================================================
   90. Produkt-Slider: Promo-Kachel mit Hover-Button
   -------------------------------------------------------------
   Link und Text kommen aus dem Tab-Item ("Promo Link", "Promo Button").
   Der Button haengt unter dem Textblock und liegt ausserhalb der Kachel;
   beim Hover/Fokus rueckt der Textblock nach oben und der Button
   erscheint von unten. Ohne Hover (Touch) ist er immer sichtbar.
   ============================================================= */
.product-slider_promo-inner {
  position: relative;
  overflow: hidden;
  --promo-button-space: 4.75rem;
}
.product-slider_promo-body {
  position: relative;
  top: 0;
  transition: top 0.35s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.product-slider_promo-button {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space--24);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.product-slider_promo-inner:has(.product-slider_promo-button):focus-within .product-slider_promo-body {
  top: calc(-1 * var(--promo-button-space));
}
@media (hover: hover) {
  .product-slider_promo-inner:has(.product-slider_promo-button):hover .product-slider_promo-body {
    top: calc(-1 * var(--promo-button-space));
  }
}
.product-slider_promo-inner:focus-within .product-slider_promo-button {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: hover) {
  .product-slider_promo-inner:hover .product-slider_promo-button {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (hover: none) {
  .product-slider_promo-inner:has(.product-slider_promo-button) .product-slider_promo-body {
    top: calc(-1 * var(--promo-button-space));
  }
  .product-slider_promo-button {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-slider_promo-body,
  .product-slider_promo-button {
    transition: none;
  }
}

/* =============================================================
   91. Rubriken-Slider (Figma 10761-5244)
   -------------------------------------------------------------
   Karte 1035x540, 16px Abstand, 60px Innenabstand, Handschrift auf
   halbtransparentem Block oben links, Text 280px breit.
   ============================================================= */
.section_guide-slider .section-head {
  margin-bottom: var(--space--40);
}
.section_guide-slider .section-head_eyebrow {
  color: #656d63;
}
.section_guide-slider .section-head_actions .button.is-link {
  font-size: var(--font-size--link-2);
}
.section_guide-slider .slider-nav {
  margin-top: var(--space--48);
}
.guide-slider_swiper .swiper-slide.guide-slider_slide {
  width: 64.6875rem;
  max-width: 85%;
  height: auto;
}
.guide-slider_card {
  justify-content: flex-end;
  min-height: 33.75rem;
  height: 100%;
  padding: 3.75rem;
  padding-bottom: 3.5rem;
}
.guide-slider_overlay {
  background-image: linear-gradient(56deg, rgba(23, 54, 100, 0.1) 0%, rgba(23, 54, 100, 0.056) 33%, rgba(23, 54, 100, 0) 50%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 55%);
}
/* halbtransparenter Block hinter der Handschrift */
.guide-slider_card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3.75rem;
  width: 10rem;
  height: 7.1875rem;
  background-color: rgba(255, 255, 255, 0.21);
  z-index: 1;
}
.guide-slider_script {
  top: 2.9375rem;
  left: 5.125rem;
  z-index: 2;
  font-size: var(--font-size--script-h2);
  line-height: 1.66;
  white-space: nowrap;
  color: #ffffff;
  opacity: 0.8;
}
.guide-slider_body {
  z-index: 2;
  gap: var(--space--12);
  max-width: 23rem;
}
.guide-slider_heading {
  font-size: var(--font-size--h3);
  line-height: 1.2;
}
.guide-slider_text {
  max-width: 17.5rem;
  font-size: var(--font-size--body-2);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
  color: #ffffff;
}
.guide-slider_button {
  margin-top: var(--space--16);
}
@media (max-width: 991px) {
  .guide-slider_swiper .swiper-slide.guide-slider_slide {
    max-width: 90%;
  }
}
@media (max-width: 767px) {
  .guide-slider_swiper .swiper-slide.guide-slider_slide {
    max-width: 92%;
  }
  .guide-slider_card {
    min-height: 28rem;
    padding: var(--space--24);
  }
  .guide-slider_card::before {
    left: var(--space--24);
    width: 8rem;
    height: 5.75rem;
  }
  .guide-slider_script {
    top: 1.75rem;
    left: 2.25rem;
  }
  .guide-slider_text {
    max-width: none;
  }
}

/* =============================================================
   92. Seitenmenue (Mobil): Schliessen-Button, ganze Zeilen klickbar
   ============================================================= */
.nav_drawer-head {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  padding: var(--space--16) var(--space--16) 0;
  z-index: 2;
  pointer-events: none;
}
.nav_drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--grey);
  color: var(--color--dark);
  font-size: 1.25rem;
  cursor: pointer;
  pointer-events: auto;
}
.nav_drawer-close:focus-visible {
  outline: 0.125rem solid var(--color--dark);
  outline-offset: 0.125rem;
}
@media (hover: hover) {
  .nav_drawer-close:hover {
    background-color: var(--border-color--primary);
  }
}
/* Zeile ist komplett klickbar: der Link fuellt die Zeile, das Icon liegt darueber */
.nav_drawer-toggle {
  position: relative;
  padding: 0;
}
.nav_drawer-link {
  display: flex;
  align-items: center;
  flex: 1;
  min-height: 3.5rem;
  padding: var(--space--16) 2.5rem var(--space--16) 0;
}
.nav_drawer-icon {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -0.5rem;
  pointer-events: none;
}
.nav_drawer-sub {
  gap: 0;
  padding: 0 0 var(--space--12) var(--space--12);
}
.nav_drawer-sublink {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space--8) 0;
}
.nav_drawer-sublink.is-all {
  font-weight: 600;
  color: var(--color--dark);
}
.nav_drawer-meta-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* =============================================================
   93. Produktkarte: ganze Karte als Link, Bild-Zoom beim Hover
   -------------------------------------------------------------
   Der Titel-Link spannt per ::after ueber die ganze Karte; Merken-Button
   und Badges liegen darueber und bleiben einzeln klickbar. Die Karte
   hebt sich beim Hover nicht an, der Titel wechselt nicht die Farbe.
   ============================================================= */
.product-item_title-link {
  position: static;
  color: inherit;
}
.product-item_title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product-item_title-link:focus-visible {
  outline: none;
}
.product-item_component:has(.product-item_title-link:focus-visible) {
  outline: 0.125rem solid var(--color--dark);
  outline-offset: 0.125rem;
}
.product-item_tag_list,
.product-item_favorite {
  z-index: 2;
}
.product-item_image {
  transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .product-item_image {
    transition: none;
  }
}

/* Produkt-Slider: Eyebrow in Grau wie im Design (Figma 10761-5089) */
.section_product-slider .section-head_eyebrow {
  color: #656d63;
}

/* Produkt-Slider: Tabs wie im Design (Figma 11124-20373) — 24px Abstand,
   keine Linie unter der Leiste, aktiver Tab mit 1px-Unterstrich 4px unter dem Text */
.section_product-slider .product-slider_menu {
  gap: var(--space--24);
  border-bottom: 0;
}
.section_product-slider .tabs_link {
  padding: 0 0 var(--space--4);
  font-size: var(--font-size--link-2);
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  color: var(--color--dark);
  opacity: 0.5;
  border-bottom: 0.0625rem solid transparent;
  transition: opacity var(--transition--fast), border-color var(--transition--fast);
}
@media (hover: hover) {
  .section_product-slider .tabs_link:hover {
    opacity: 1;
  }
}
.section_product-slider .tabs_link.is-active {
  opacity: 1;
  color: var(--color--dark);
  border-bottom-color: var(--color--green);
}
.section_product-slider .tabs_link:focus-visible {
  opacity: 1;
}
@media (max-width: 767px) {
  .section_product-slider .section-head {
    gap: var(--space--16);
  }
}

/* Menuepunkte mit Dropdown sind Buttons: Browser-Stile zuruecksetzen */
button.nav_link,
button.nav_drawer-link {
  appearance: none;
  margin: 0;
  border: 0;
  background: none;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
button.nav_drawer-link {
  width: 100%;
}
.nav_dropdown-toggle:has(button.nav_link:focus-visible) {
  outline: 0.125rem solid currentColor;
  outline-offset: -0.125rem;
}
button.nav_link:focus-visible {
  outline: none;
}

/* =============================================================
   94. Markenwelt (Figma 10761-5807)
   -------------------------------------------------------------
   1440x914: Inhalt oben, Zitat am unteren Rand, dazwischen Luft
   fuers Hintergrundbild. Buttons als Glas-Pills mit Backdrop-Blur.
   ============================================================= */
.brand-world_inner {
  display: flex;
  flex-direction: column;
  min-height: 57.125rem;
}
.brand-world_inner > .padding-global {
  position: relative;
  display: flex;
  flex: 1;
}
.brand-world_inner > .padding-global > .container-medium {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.brand-world_overlay {
  background-image: linear-gradient(181deg, rgba(32, 2, 40, 0.41) 1%, rgba(32, 2, 40, 0.35) 42%, rgba(32, 2, 40, 0.25) 66%),
    linear-gradient(180deg, rgba(35, 46, 32, 0) 54%, rgba(35, 46, 32, 0.17) 68%, rgba(35, 46, 32, 0.3) 100%);
}
.brand-world_content {
  gap: 0;
}
.brand-world_content > .text-style-eyebrow {
  font-size: var(--font-size--h5);
  line-height: 1.2;
  letter-spacing: var(--tracking--subline);
}
.brand-world_wordmark {
  margin-top: var(--space--12);
}
.brand-world_text {
  max-width: 27.4375rem;
  margin-top: var(--space--28);
  font-size: var(--font-size--body);
  line-height: 1.7;
  color: var(--color--white);
}
.brand-world_links {
  gap: 0.4375rem;
  margin-top: var(--space--48);
}
.brand-world_link {
  gap: var(--space--4);
  padding: 0.6875rem 1.125rem 0.5625rem;
  border-radius: var(--radius--pill);
  background-color: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(0.3125rem);
  backdrop-filter: blur(0.3125rem);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.08);
  color: var(--color--white);
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
@media (hover: hover) {
  .brand-world_link:hover {
    background-color: rgba(255, 255, 255, 0.36);
  }
}
.brand-world_link:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.125rem;
}
.brand-world_link-icon {
  width: 1rem;
  height: 1rem;
}
/* Zitat sitzt am unteren Rand, mindestens 10rem unter den Buttons */
.brand-world_quote {
  width: 100%;
  max-width: 37rem;
  margin: auto auto 0;
  padding: 2rem var(--space--24) 1.75rem;
  border-radius: var(--radius--medium);
  background-color: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
}
.brand-world_content {
  margin-bottom: 10rem;
}
.brand-world_quote-text {
  max-width: 26.6875rem;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--font-size--h5);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking--subline);
}
.brand-world_quote-author {
  margin-top: var(--space--20);
  font-size: var(--font-size--body-3);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
  opacity: 1;
}
@media (max-width: 767px) {
  .brand-world_inner {
    min-height: 44rem;
  }
  .brand-world_content {
    margin-bottom: 6rem;
  }
  .brand-world_quote {
    padding: var(--space--24) var(--space--20);
  }
}

/* =============================================================
   95. Section-Eyebrow grau wie im Design (#656d63);
       auf dunklen/farbigen Sections weiterhin weiss
   ============================================================= */
.section-head_eyebrow {
  color: var(--section-eyebrow, #656d63);
}
.is-theme-green,
.is-theme-dark,
.is-theme-red {
  --section-eyebrow: var(--color--white);
}

/* =============================================================
   96. News-Slider / Artikel-Karte (Figma 10957-21202)
   ============================================================= */
.article-card {
  gap: var(--space--32);
}
.article-card_media.media-frame {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius--medium);
}
/* Tag voll rot, buendig links auf dem Bild */
.article-card .article-card_badge {
  top: 0.625rem;
  left: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0.125rem 0.6875rem 0 0.625rem;
  border-radius: 0;
  background-color: var(--color--red);
  color: var(--color--white);
  font-size: var(--font-size--subline-3);
  font-weight: 600;
  font-style: italic;
  line-height: 1.66;
  letter-spacing: var(--tracking--subline);
}
.article-card_body {
  gap: var(--space--16);
}
.article-card_date {
  font-size: var(--font-size--body-3);
  letter-spacing: var(--tracking--link);
  color: var(--color--dark);
  opacity: 0.7;
}
.article-card_title {
  font-size: var(--font-size--h4);
  line-height: 1.1;
  letter-spacing: var(--tracking--h4);
}
.article-card_text {
  margin-top: calc(-1 * var(--space--4));
  font-size: var(--font-size--body-2);
  line-height: 1.4;
  letter-spacing: var(--tracking--link);
  color: rgba(35, 46, 32, 0.7);
}
.section_news-slider .slider-nav_button {
  background-color: var(--color--white);
}

/* =============================================================
   97. Social Media (Figma 10761-5874 / 12218-23510 / 12489-23218)
   -------------------------------------------------------------
   Desktop: die rote Kachel wird per Script als erster und letzter
   Slide gesetzt, kein Loop; am Ende springt Weiter zum Anfang.
   Mobil: Kachel steht einmal oben, darunter der Post-Slider.
   ============================================================= */
.social-media_layout {
  display: block;
}
.social-media_layout > .social-media_promo {
  display: none;
}
.social-media_card {
  aspect-ratio: 345 / 554;
}
.social-media_promo {
  position: relative;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  overflow: hidden;
  padding: 7rem var(--space--24) 2.5rem;
  background-color: var(--color--red);
}
.social-media_promo.is-promo-slide {
  display: flex;
  height: auto;
}
/* halbtransparenter Block hinter der Handschrift */
.social-media_promo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 7.5rem;
  height: 6.25rem;
  background-color: rgba(255, 255, 255, 0.21);
}
.social-media_script {
  position: absolute;
  top: 2.3rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--font-size--script-h3);
  line-height: 1.66;
  color: var(--color--white);
  opacity: 0.8;
}
.social-media_promo-body {
  position: relative;
  gap: 1.75rem;
}
.social-media_logo {
  width: 11.875rem;
  max-width: 100%;
  height: auto;
}
.social-media_promo-text {
  max-width: 12rem;
  font-size: var(--font-size--body);
  line-height: 1.7;
  color: var(--color--white);
}
.social-media_promo .button {
  width: 13.6875rem;
  max-width: 100%;
  min-height: 2.75rem;
  padding: var(--space--12) var(--space--16);
  font-size: var(--font-size--link-2);
}
@media (max-width: 767px) {
  .social-media_layout > .social-media_promo {
    display: flex;
    padding: 7rem var(--space--20) var(--space--40);
  }
  .social-media_promo-text {
    max-width: none;
  }
  .social-media_promo .button {
    width: 100%;
    min-height: 3.25rem;
    font-size: var(--font-size--link);
  }
}

/* =============================================================
   98. Newsletter-CTA (Figma 10761-5917)
   -------------------------------------------------------------
   Glas-Rahmen um Eingabefeld und Button. Der Fokusrahmen liegt
   innen, damit das Feld beim Anklicken nicht schmaler wirkt
   (ein aeusserer Rahmen wurde rechts vom Button verdeckt).
   ============================================================= */
.newsletter-cta_overlay {
  background-color: rgba(3, 32, 9, 0.2);
}
.newsletter-cta_content {
  gap: var(--space--8);
}
.newsletter-cta_content > .text-style-eyebrow {
  font-size: var(--font-size--h6);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color--white);
}
.newsletter-cta_form-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--12);
  max-width: 31rem;
  margin-top: var(--space--16);
}
.newsletter-cta_form {
  width: 100%;
  gap: var(--space--4);
  padding: var(--space--4);
  background-color: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(0.3125rem);
  backdrop-filter: blur(0.3125rem);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.08);
}
.newsletter-cta_form .newsletter-cta_input {
  flex: 1 1 18rem;
  box-sizing: border-box;
  min-width: 0;
  height: 3.25rem;
  align-self: center;
  margin: 0;
  padding: 0 1.375rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--color--white);
  color: var(--color--dark);
  font-family: inherit;
  font-size: var(--font-size--body);
  font-weight: 400;
  line-height: 1.7;
}
.newsletter-cta_form .newsletter-cta_input::placeholder {
  color: #656d63;
  font-weight: 400;
  opacity: 1;
}
.newsletter-cta_form .newsletter-cta_input:focus,
.newsletter-cta_form .newsletter-cta_input:focus-visible {
  border: 0;
  box-shadow: none;
  outline: 0.125rem solid var(--color--green);
  outline-offset: -0.125rem;
}
.newsletter-cta_form .button {
  flex: none;
  box-sizing: border-box;
  height: 3.25rem;
  min-height: 3.25rem;
  padding: 0 2.875rem;
  font-size: var(--font-size--link);
}
.newsletter-cta_note {
  max-width: 25.625rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.616;
  color: var(--color--white);
}
.newsletter-cta_note a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}
@media (max-width: 767px) {
  .newsletter-cta_form .newsletter-cta_input {
    flex-basis: auto;
    align-self: stretch;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
  }
  .newsletter-cta_form .button {
    width: 100%;
  }
}

/* =============================================================
   99. Footer (Figma 10761-5929 / 10761-6029 / Mobil 11043-22210)
   ============================================================= */
/* --- Social-Zeile: nur Farbwechsel beim Hover, kein Anheben --- */
.footer_social-heading {
  font-size: var(--font-size--h5);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking--subline);
}
.footer_social-list {
  gap: var(--space--16);
}
.footer_social-link {
  width: 1.875rem;
  height: 1.875rem;
  transition: background-color var(--transition--fast);
}
@media (hover: hover) {
  .footer_social-link:hover {
    transform: none;
  }
}

/* --- Link-Spalten Desktop: Produkte | Unternehmen+Haendler | Wissen+Hilfe | Rezepte --- */
.footer_link-grid {
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: var(--space--40) var(--space--32);
  padding: 4.875rem 0 6.25rem;
}
.footer_link-column:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.footer_link-column:nth-child(2) { grid-column: 2; grid-row: 1; }
.footer_link-column:nth-child(3) { grid-column: 2; grid-row: 2; }
.footer_link-column:nth-child(4) { grid-column: 3; grid-row: 1; }
.footer_link-column:nth-child(5) { grid-column: 3; grid-row: 2; }
.footer_link-column:nth-child(6) { grid-column: 4; grid-row: 1 / span 2; }
.footer_link-column {
  gap: var(--space--24);
  align-self: start;
}
.footer_column-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color--dark);
  text-align: left;
  cursor: default;
}
.footer_column-title > span:first-child {
  opacity: 0.5;
}
.footer_column-icon {
  display: none;
}
.footer_link-list {
  gap: var(--space--16);
}
.footer_link {
  display: inline-flex;
  align-items: center;
  gap: var(--space--4);
  font-size: var(--font-size--link);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
}
.footer_link-external {
  display: inline-flex;
  font-size: 1rem;
  color: var(--color--red);
}
@media (max-width: 991px) {
  .footer_link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer_link-column:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* --- Rechtliches-Zeile --- */
.footer_legal-row {
  padding-top: 3.125rem;
  padding-bottom: 3.125rem;
  border-top: 0.125rem solid var(--color--white);
}
.footer_copyright {
  font-size: var(--font-size--body-3);
  font-weight: 400;
  letter-spacing: var(--tracking--link);
  color: var(--color--dark);
}
.footer_legal-right {
  gap: var(--space--16);
}
.footer_legal-link {
  font-size: var(--font-size--link-3);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.03em;
  color: var(--color--dark);
}
.footer_legal-right .li-lang_wrapper {
  display: flex;
  align-items: center;
  gap: var(--space--16);
}
.footer_legal-right .li-lang_wrapper::before {
  content: "";
  width: 0.0625rem;
  height: 1.75rem;
  background-color: rgba(35, 46, 32, 0.15);
}
.footer_legal-right .li-lang_dd-toggle {
  gap: var(--space--4);
  font-size: var(--font-size--link-3);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color--dark);
}
.footer_legal-right .li-lang_dd-toggle-icon {
  width: 1rem;
  height: 1rem;
  color: var(--color--red);
}

/* --- Mobil: Spalten als Akkordeon --- */
@media (max-width: 767px) {
  .footer_link-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 2.25rem 0 2.75rem;
  }
  .footer_link-column {
    gap: 0;
    border-bottom: 0.0625rem solid rgba(35, 46, 32, 0.1);
    padding-bottom: 0;
  }
  /* Trigger ueber die ganze Zeilenhoehe (24px oben, 20px unten wie Figma) */
  .footer_column-title {
    min-height: 1.875rem;
    padding: 1.5rem 0 1.25rem;
    font-size: var(--font-size--h5);
    letter-spacing: var(--tracking--subline);
    cursor: pointer;
  }
  .footer_column-title > span:first-child {
    opacity: 1;
  }
  .footer_column-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: var(--radius--pill);
    background-color: var(--color--white);
    font-size: 0.875rem;
    transition: transform var(--transition--base);
  }
  .footer_link-column.is-open .footer_column-icon {
    transform: rotate(180deg);
  }
  .footer_link-list {
    display: none;
    gap: 0;
    padding: 0 0 1.25rem;
  }
  .footer_link-column.is-open .footer_link-list {
    display: flex;
  }
  .footer_link {
    padding: 0.625rem 0;
    color: #656d63;
  }
  .footer_legal-row {
    padding-top: var(--space--40);
    padding-bottom: 3.75rem;
  }
  .footer_legal-inner {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 2.75rem;
  }
  .footer_legal-right {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
  }
  .footer_legal-right .li-lang_wrapper {
    flex-basis: 100%;
    margin-top: var(--space--8);
  }
  .footer_legal-link,
  .footer_legal-right .li-lang_dd-toggle {
    font-size: var(--font-size--link);
  }
  .footer_legal-right .li-lang_wrapper::before {
    display: none;
  }
  /* Sprach-Liste links am Trigger ausrichten, sonst ragt sie aus dem Bild */
  .footer_legal-right .li-lang_dd-list {
    left: 0;
    right: auto;
  }
}

/* =============================================================
   100. Geschlossene Off-Canvas-Panels (Suche / Mini-Cart)
   Der Schatten der rechts ausserhalb liegenden Panels war als
   Schleier am rechten Rand sichtbar.
   ============================================================= */
.nav_predictive-search-holder,
.nav_mini-cart-holder {
  visibility: hidden;
  box-shadow: none;
  transition: transform var(--transition--base), box-shadow var(--transition--base), visibility 0s linear 0.3s;
}
.nav_dropdown.is-open .nav_predictive-search-holder,
.nav_dropdown.is-open .nav_mini-cart-holder {
  visibility: visible;
  box-shadow: var(--shadow--lg);
  transition: transform var(--transition--base), box-shadow var(--transition--base), visibility 0s;
}
.nav_predictive-search-holder .predictive-search_component,
.nav_mini-cart-holder .mini-cart_component {
  box-shadow: none;
}

/* =============================================================
   101. Nachtraege: Sprach-Dropdown, Logo-Bilder, Newsletter, Hero
   ============================================================= */
/* Sprach-Dropdown: Eintraege in Semibold */
.li-lang_dd-link {
  font-weight: 600;
}

/* Markenwelt: echtes Logo statt Handschrift (Setting "Wortmarke Logo") */
.brand-world_wordmark-wrap {
  display: contents;
}
.brand-world_logo-wrap {
  display: block;
  margin-top: var(--space--12);
}
.brand-world_logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 5.15rem;
  margin: 0 auto;
  object-fit: contain;
}

/* Social Media rote Karte: Logo-Bild statt Handschrift */
.social-media_script.is-image {
  opacity: 1;
  line-height: 0;
}
.social-media_script-img {
  display: block;
  width: auto;
  max-width: 12rem;
  height: 3rem;
  object-fit: contain;
}

/* Newsletter: Shopify haengt beim Fokus das (unsichtbare) hCaptcha-Feld
   in das Formular. Als Flex-Kind erzeugte es einen zusaetzlichen Abstand
   rechts und das Feld wurde schmaler. Alles ausser Feld und Button
   wird daher aus dem Fluss genommen. */
.newsletter-cta_form > :not(.newsletter-cta_input):not(.button) {
  position: absolute !important;
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  margin: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Hero: Abstand Headline zu Button (halbiert: 14px) */
.hero-slider_content .button-group {
  margin-top: 0.125rem;
}
@media (max-width: 767px) {
  .hero-slider_content .button-group {
    margin-top: -0.375rem;
  }
}

/* Footer Social: Icons aus Figma (Kreis mit ausgestanztem Logo).
   Die Kreisfarbe folgt currentColor, beim Hover wird sie rot. */
.footer_social-link {
  width: 1.875rem;
  height: 1.875rem;
  background-color: transparent;
  color: var(--color--dark);
  transition: color var(--transition--fast);
}
@media (hover: hover) {
  .footer_social-link:hover {
    background-color: transparent;
    color: var(--color--red);
    transform: none;
  }
}
.footer_social-glyph {
  display: flex;
  width: 100%;
  height: 100%;
}
.footer_social-link .footer_social-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.footer_social-glyph > .footer_social-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =============================================================
   102. Rezepte-Slider (Figma 10761-5354) + Basenwelten auf Containerbreite
   -------------------------------------------------------------
   Linke Spalte 392px mit Text oben und Dots/Pfeilen unten
   (352px breit, Dots links, Pfeile rechts), 100px Abstand zum
   Slider. Karten 472x607, 16px Abstand, laufen nach rechts hinaus.
   ============================================================= */
/* Die aeussere section_inner traegt schon den Seitenabstand (80px) */
.section_recipe-slider .recipe-slider_layout {
  padding-left: 0;
}
.recipe-slider_layout {
  grid-template-columns: 24.5rem minmax(0, 1fr);
  gap: 7rem;
  align-items: stretch;
}
.recipe-slider_intro {
  justify-content: flex-start;
  gap: var(--space--12);
}
.recipe-slider_intro .section-head_eyebrow {
  font-size: var(--font-size--h6);
  line-height: 1.2;
}
.recipe-slider_intro .section-head_text {
  max-width: 22.5625rem;
  font-size: var(--font-size--body);
  line-height: 1.7;
  color: #656d63;
}
.recipe-slider_intro .button {
  width: 16.875rem;
  max-width: 100%;
  margin-top: var(--space--16);
}
.recipe-slider_intro .slider-nav {
  width: 22rem;
  max-width: 100%;
  justify-content: space-between;
  gap: var(--space--24);
  margin-top: auto;
  padding-top: var(--space--40);
}
.recipe-slider_swiper .swiper-slide.recipe-slider_slide {
  width: 29.5rem;
  max-width: 85vw;
}
.section_recipe-slider .recipe-card {
  min-height: 37.9375rem;
  border-radius: 0.75rem;
  box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.07);
}
.recipe-slider_swiper .swiper-slide.recipe-slider_slide {
  transition: opacity 0.25s ease;
}
.recipe-slider_swiper .swiper-slide.recipe-slider_slide.is-out-left {
  opacity: 0;
}
.section_recipe-slider .recipe-card_media .media-frame {
  border-radius: 0.375rem;
}
.section_recipe-slider .recipe-card_body {
  gap: var(--space--12);
  padding: 2.375rem var(--space--24) var(--space--16);
}
.section_recipe-slider .recipe-card_title {
  font-size: var(--font-size--h4);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.section_recipe-slider .recipe-card_text {
  max-width: 17.875rem;
  font-size: var(--font-size--body-2);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
  color: #656d63;
}
.section_recipe-slider .recipe-card_body .meta-row {
  margin-top: var(--space--16);
  font-size: var(--font-size--body-3);
  opacity: 0.7;
}
.section_recipe-slider .recipe-card_footer {
  display: flex;
  justify-content: center;
  padding: 0 var(--space--24) 2.875rem;
}
.section_recipe-slider .recipe-card_footer .button {
  width: 23.5625rem;
  max-width: 100%;
}
/* Tablet/Mobil (Figma 11124-21415): Text, Button, Slider, darunter
   Dots links und Pfeile rechts. Die Textspalte wird aufgeloest, damit
   die Navigation unter den Slider rutschen kann. */
@media (max-width: 991px) {
  .recipe-slider_layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space--12);
  }
  .recipe-slider_intro {
    display: contents;
  }
  .recipe-slider_intro .button {
    margin-top: var(--space--12);
  }
  .recipe-slider_track {
    order: 1;
    margin-top: var(--space--28);
  }
  .section_inner .recipe-slider_swiper {
    clip-path: inset(-2rem -100vw -2rem -0.5rem);
  }
  .recipe-slider_swiper .swiper-slide.recipe-slider_slide.is-out-left {
    opacity: 1;
  }
  .recipe-slider_intro .slider-nav {
    order: 2;
    width: 100%;
    margin-top: var(--space--28);
    padding-top: 0;
  }
}
@media (max-width: 767px) {
  .recipe-slider_intro .button {
    width: 100%;
  }
  .recipe-slider_swiper .swiper-slide.recipe-slider_slide {
    width: 20rem;
    max-width: 88vw;
  }
  .section_recipe-slider .recipe-card {
    min-height: 31.25rem;
    padding: var(--space--4);
  }
  .section_recipe-slider .recipe-card_body {
    padding: 2rem var(--space--32) var(--space--16);
  }
  .section_recipe-slider .recipe-card_footer {
    padding-bottom: 2rem;
  }
}
/* Rezepte liegen jetzt im container-large: kein zusaetzlicher Seitenabstand */
.section_recipe-slider .recipe-slider_layout {
  padding-right: 0 !important;
}

/* Produkt-Slider: Promo-Kachel nur auf Desktop/Tablet */
@media (max-width: 767px) {
  .product-slider_swiper .swiper-slide.product-slider_promo {
    display: none;
  }
}

/* =============================================================
   103. Lesbarkeits-Verlaeufe
   ============================================================= */
/* Hero: dunkelgrauer Verlauf oben hinter Top-Bar und Navigation */
.hero-slider_overlay::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 16rem;
  background-image: linear-gradient(180deg, rgba(28, 30, 28, 0.6) 0%, rgba(28, 30, 28, 0.32) 45%, rgba(28, 30, 28, 0) 100%);
  pointer-events: none;
}
@media (max-width: 767px) {
  .hero-slider_overlay::before {
    height: 10rem;
  }
}

/* Basenwelten: Verlauf von links hinter dem Text, rechts bleibt das Bild frei */
.guide-slider_overlay {
  background-image: linear-gradient(90deg, rgba(20, 24, 20, 0.62) 0%, rgba(20, 24, 20, 0.42) 30%, rgba(20, 24, 20, 0.12) 52%, rgba(20, 24, 20, 0) 65%);
}
/* Mobil steht der Text unten ueber die ganze Breite: Verlauf von unten */
@media (max-width: 767px) {
  .guide-slider_overlay {
    background-image: linear-gradient(0deg, rgba(20, 24, 20, 0.72) 0%, rgba(20, 24, 20, 0.5) 38%, rgba(20, 24, 20, 0.12) 62%, rgba(20, 24, 20, 0) 75%);
  }
}


/* =============================================================
   104. Swiper-Pfeile ab Tablet abwaerts ausblenden (ganze Seite)
   Gewischt wird per Touch, die Dots bleiben sichtbar.
   ============================================================= */
@media (max-width: 991px) {
  .swiper-button-prev-c,
  .swiper-button-next-c,
  .slider-nav_buttons {
    display: none !important;
  }
  .slider-nav {
    justify-content: center;
  }
}

/* Navigation: gehoverter und offener Punkt bleiben voll dunkel und
   gut lesbar, nur die uebrigen Punkte werden bei offenem Menue gedimmt */
.nav_menu-dropdown.is-open .nav_dropdown-toggle,
.nav_menu-dropdown.is-open .nav_link {
  color: var(--nav-main-fg);
  opacity: 1;
}
@media (hover: hover) {
  .nav_dropdown-toggle:hover .nav_link {
    opacity: 1;
  }
  .nav_component:has(.nav_menu-dropdown.is-open .nav_dropdown-list) .nav_menu-dropdown:not(.is-open) .nav_dropdown-toggle:hover,
  .nav_component.is-dropdown-open .nav_menu-dropdown:not(.is-open) .nav_dropdown-toggle:hover {
    color: var(--nav-main-fg);
  }
}

/* =============================================================
   106. Mobile-Menue: scrollbar + Abdunkelung (Tablet und Mobil)
   ============================================================= */
.nav_drawer-backdrop {
  display: none;
}
@media (max-width: 991px) {
  .nav_drawer-scroll {
    height: 100%;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav_drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition--base), visibility var(--transition--base);
  }
  .nav_drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }
}

/* =============================================================
   107. Produktkarte: kein Rahmen/Schatten um das Produktbild
   ============================================================= */
.product-item_image-wrapper {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
@media (hover: hover) {
  .product-item_image-link:hover .product-item_image-wrapper {
    border-color: transparent;
    box-shadow: none;
  }
}

/* =============================================================
   108. Slider-Dots: mittig ab Tablet, maximal 5 sichtbar
   Hero: alle Dots, ab Tablet mittig. Alle anderen Slider: Swiper
   dynamicBullets (siehe unten).
   ============================================================= */
@media (max-width: 991px) {
  .section_hero-slider .hero-slider_dots {
    left: 0 !important;
    right: 0;
    justify-content: center;
  }
}
/* Uebrige Slider: Swiper "dynamicBullets" (dynamicMainBullets: 1) —
   Swiper zeigt 5 Dots um den aktiven, verkleinert die aeusseren
   stufenweise und schiebt die Reihe mit. Swiper berechnet die Breite
   aus Dot + Margin, daher Margin statt gap. */
.slider-nav .slider-nav_dots.swiper-pagination-bullets-dynamic.swiper-pagination-horizontal {
  left: auto;
  transform: none;
  flex: none;
  gap: 0;
  overflow: hidden;
  white-space: nowrap;
}
.slider-nav .slider-nav_dots.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  position: relative;
  flex: none;
  margin: 0 0.25rem !important;
  transform: scale(0.33);
  transition: transform 0.2s ease, left 0.2s ease, opacity var(--transition--fast), background-color var(--transition--fast);
}
.slider-nav .slider-nav_dots.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.slider-nav .slider-nav_dots.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev,
.slider-nav .slider-nav_dots.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
/* Bis 5 Dots: alle gleich gross, nichts verschoben */
.slider-nav .slider-nav_dots.swiper-pagination-bullets-dynamic:not(:has(> .swiper-pagination-bullet:nth-child(6))) {
  width: auto !important;
}
.slider-nav .slider-nav_dots.swiper-pagination-bullets-dynamic:not(:has(> .swiper-pagination-bullet:nth-child(6))) > .swiper-pagination-bullet {
  left: 0 !important;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .slider-nav .slider-nav_dots.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: none;
  }
}

/* =============================================================
   109. Footer: "Mein Account" als letzte Zeile nur im Mobil-Akkordeon
   Social-Zeile mobil zentriert (Figma 11124-23588)
   ============================================================= */
.footer_account-link {
  display: none;
}
@media (max-width: 767px) {
  .footer_account-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space--16);
    margin-top: -2.75rem;
    margin-bottom: 2.75rem;
    padding: 1.5rem 0 1.25rem;
    border-bottom: 0.0625rem solid rgba(35, 46, 32, 0.1);
    font-size: var(--font-size--h5);
    font-weight: 600;
    font-style: italic;
    line-height: 1.2;
    letter-spacing: var(--tracking--subline);
    color: var(--color--dark);
  }
  .footer_account-link .footer_column-icon.is-right > * {
    transform: rotate(-90deg);
  }
  .footer_social-inner {
    align-items: center;
    text-align: center;
  }
  .footer_social-heading {
    width: 100%;
    text-align: center;
  }
  .footer_social-list {
    justify-content: center;
    gap: var(--space--24);
  }
  .footer_social-link {
    width: 2rem;
    height: 2rem;
  }
}


/* =============================================================
   110. Kategorie-Hero (Figma 10761-12943) + Sprunganker
   ============================================================= */
.collection-hero_overlay {
  background-image: linear-gradient(180deg, rgba(27, 34, 17, 0.59) 0%, rgba(27, 34, 17, 0) 16rem),
    linear-gradient(191.39deg, rgba(0, 0, 0, 0) 40%, rgba(14, 36, 17, 0.4) 81%);
}
.collection-hero_content-wrap {
  padding-bottom: 2.5rem;
}
.collection-hero_content {
  gap: var(--space--24);
  max-width: 33.75rem;
}
.collection-hero_content .collection-hero_eyebrow {
  font-size: var(--font-size--h5);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--subline);
}
.collection-hero_heading {
  font-size: 3.25rem;
  line-height: 1;
  letter-spacing: -0.03em;
}
.collection-hero_content .anchor-chips {
  margin-top: var(--space--16);
}
.collection-hero_content .chip-row {
  gap: 0.4375rem;
}
.collection-hero_content .chip {
  padding: 0.9375rem 1.5625rem 0.8125rem;
  border: 0;
  border-radius: var(--radius--pill);
  background-color: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(0.3125rem);
  backdrop-filter: blur(0.3125rem);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.08);
  color: var(--color--white);
  font-size: var(--font-size--h5);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--subline);
  transition: background-color var(--transition--fast), color var(--transition--fast);
}
@media (hover: hover) {
  .collection-hero_content .chip:hover {
    background-color: rgba(255, 255, 255, 0.4);
    color: var(--color--white);
  }
}
@media (max-width: 767px) {
  .collection-hero_heading {
    font-size: var(--font-size--h1);
  }
  .collection-hero_content .chip {
    padding: 0.6875rem 1.125rem 0.5625rem;
    font-size: var(--font-size--h6);
  }
}

/* Sprungziele: nicht unter der fixen Navigation verschwinden */
.section_inner[id] {
  scroll-margin-top: var(--nav-height, 6rem);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* =============================================================
   111. Produkt-Slider: Kopf-Link (Figma 10761-12965)
   ============================================================= */
.section_product-slider .section-head {
  margin-bottom: var(--space--40);
}
.section_product-slider .section-head_actions .button.is-link {
  font-size: var(--font-size--link-2);
}
.section_product-slider .section-head_actions:not(:has(a)) {
  display: none;
}

/* =============================================================
   112. Produkt-Karte: Story-Bild als Hover-Overlay
   Nur wenn in der Produkt-Story ein erstes Bild (top_image) gepflegt ist.
   ============================================================= */
.product-item_story {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: var(--space--16) var(--space--16) 0.9375rem;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.product-item_story-link {
  position: absolute;
  inset: 0;
}
.product-item_story-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.product-item_story-button {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 17.125rem;
  min-height: 2.75rem;
  padding: var(--space--12) var(--space--16);
  font-size: var(--font-size--link-2);
}
@media (hover: hover) {
  .product-item_component:hover .product-item_story,
  .product-item_component:focus-within .product-item_story {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
  }
  .product-item_component:hover .product-item_story-img {
    transform: scale(1.04);
  }
}

/* =============================================================
   113. Rezepte-Slider Tablet/Mobil: randlos bis zum Viewport,
   erste Karte bleibt buendig mit dem Text; Dots mittig
   ============================================================= */
@media (max-width: 991px) {
  .section_inner .recipe-slider_swiper {
    margin-left: -2.5rem;
    margin-right: -2.5rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    clip-path: inset(-2rem 0 -2rem 0);
  }
  .recipe-slider_intro .slider-nav {
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .section_inner .recipe-slider_swiper {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* =============================================================
   114. Kategorie-Hero: Anker-Buttons duerfen die volle Breite nutzen,
   nur Text bleibt auf 540px begrenzt
   ============================================================= */
.collection-hero_content {
  max-width: none;
}
.collection-hero_content > :not(.anchor-chips) {
  max-width: 43.625rem;
}

/* =============================================================
   115. Filter-Button "Eigenschaften" geoeffnet: weisse Schrift auf Gruen
   ============================================================= */
.collection-products_filter-toggle.is-active {
  background-color: var(--color--green);
  border-color: var(--color--green);
  color: var(--color--white);
}

/* =============================================================
   116. Blog-Slider (Figma 10761-13672)
   Hellgrau-Verlauf, Karten 420px mit 16px Abstand, laufen nach
   rechts aus dem Raster; Datum und Lesezeit unter dem Text.
   ============================================================= */
.is-theme-gradient {
  background-color: var(--color--white);
  background-image: linear-gradient(178.36deg, #f7f7f7 1.95%, #ffffff 60.99%, #f7f7f7 115.66%);
}
.section_inner .blog-slider_swiper {
  overflow: visible;
}
.blog-slider_swiper .swiper-slide.blog-slider_slide {
  width: 26.25rem;
  max-width: 85vw;
}
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space--32);
  height: 100%;
}
.blog-card_media {
  display: block;
  height: 19.5rem;
  overflow: hidden;
  border-radius: 0.625rem;
  background-color: var(--color--grey);
}
.blog-card_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.blog-card_badge {
  position: absolute;
  top: 0.625rem;
  left: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0.0625rem 0.975rem 0;
  background-color: #628859;
  color: var(--color--white);
  font-size: 0.9375rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.66;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.blog-card_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
  max-width: 22rem;
}
.blog-card_content {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
}
.blog-card_link {
  color: inherit;
  text-decoration: none;
}
.blog-card_title {
  margin: 0;
  color: var(--color--dark);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
  transition: color var(--transition--fast);
}
.blog-card_text {
  margin: 0;
  color: rgba(35, 46, 32, 0.7);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.blog-card_meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color--dark);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.blog-card_meta-dot {
  width: 0.125rem;
  height: 0.125rem;
  border-radius: 50%;
  background-color: currentColor;
}
@media (hover: hover) {
  .blog-card:hover .blog-card_img {
    transform: scale(1.04);
  }
  .blog-card:hover .blog-card_title {
    color: var(--color--red);
  }
}
.section_blog-slider .slider-nav {
  margin-top: var(--space--48);
}
.section_blog-slider .slider-nav_button {
  background-color: var(--color--grey);
}
@media (max-width: 767px) {
  .blog-slider_swiper .swiper-slide.blog-slider_slide {
    width: 20rem;
  }
  .blog-card {
    gap: var(--space--24);
  }
  .blog-card_media {
    height: 15rem;
  }
  .blog-card_title {
    font-size: 1.25rem;
  }
  .section_blog-slider .slider-nav {
    margin-top: var(--space--32);
  }
}

/* =============================================================
   117. Kollektion-Intro (Figma 10761-15759)
   Karte mit Hellgrau-Verlauf, Handschrift + Merkmale, zentrierter Text
   ============================================================= */
.collection-intro_card {
  display: flex;
  justify-content: center;
  padding: 3.375rem var(--space--40) 4.375rem;
  border-radius: 0.625rem;
  background-image: linear-gradient(179.27deg, #f7f7f7 1.95%, #ffffff 60.99%, #f7f7f7 115.66%);
}
.collection-intro_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.375rem;
  width: 100%;
  max-width: 38.75rem;
  text-align: center;
}
.collection-intro_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}
.collection-intro_script {
  margin: 0;
  color: var(--color--dark);
  font-size: 2.75rem;
  line-height: 1.66;
}
.collection-intro_meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3125rem;
  color: var(--color--dark);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.collection-intro_meta-item:empty,
.collection-intro_meta-item:empty + .collection-intro_meta-dot,
.collection-intro_meta-dot:has(+ .collection-intro_meta-item:empty) {
  display: none;
}
.collection-intro_meta-dot {
  width: 0.125rem;
  height: 0.125rem;
  border-radius: 50%;
  background-color: currentColor;
}
.collection-intro_text {
  color: var(--color--dark);
  font-size: var(--font-size--body-1, 1rem);
  line-height: 1.7;
}
.collection-intro_text p {
  margin: 0;
}
@media (max-width: 767px) {
  .collection-intro_card {
    padding: 2.5rem var(--space--20) 3rem;
  }
  .collection-intro_inner {
    gap: 1.75rem;
  }
  .collection-intro_script {
    font-size: 2.25rem;
  }
}

/* =============================================================
   118. Split-Banner / Haendler (Figma 10761-15881)
   Drei gleich breite Spalten, Panel in der Kategoriefarbe
   (Metafeld theme_color), Wortmarke als Logo, Button unten
   ============================================================= */
.split-banner_layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem) minmax(0, 1fr);
  min-height: 32.3125rem;
}
.split-banner_media {
  min-height: 32.3125rem;
}
.split-banner_panel {
  justify-content: space-between;
  gap: var(--space--40);
  padding: 7.8125rem 1.375rem 6.25rem;
}
.split-banner_text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.split-banner_text .split-banner_eyebrow,
.split-banner_text .split-banner_subtitle {
  font-size: var(--font-size--h3, 2rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.split-banner_logo-wrap {
  display: block;
  margin: 0.8125rem 0 1.0625rem;
}
.split-banner_logo {
  display: block;
  width: 18.25rem;
  max-width: 100%;
  height: auto;
}
.split-banner_panel .button {
  margin-top: 0;
  padding: var(--space--16) 3.5rem;
  font-size: var(--font-size--link-1, 1rem);
}
@media (max-width: 991px) {
  .split-banner_layout {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .split-banner_media {
    min-height: 0;
  }
  .split-banner_panel {
    padding: 4rem var(--space--20);
  }
}
@media (max-width: 767px) {
  .split-banner_text .split-banner_eyebrow,
  .split-banner_text .split-banner_subtitle {
    font-size: 1.5rem;
  }
  .split-banner_logo {
    width: 13.75rem;
  }
}
.split-banner_logo-wrap {
  position: relative;
}
.split-banner_logo-svg {
  display: block;
  width: 18.25rem;
  max-width: 100%;
  height: auto;
  color: var(--color--white);
}
@media (max-width: 767px) {
  .split-banner_logo-svg {
    width: 13.75rem;
  }
}

/* =============================================================
   119. Sortier-Chip: gesamter Chip ist Klickflaeche
   Das Select liegt unsichtbar ueber dem ganzen Chip, der gewaehlte
   Wert wird daneben als Text gezeigt (per Script gespiegelt).
   ============================================================= */
.collection-products_sort {
  position: relative;
  cursor: pointer;
}
.collection-products_sort-value {
  padding: 0 var(--space--4);
  color: var(--color--red);
  font-weight: 600;
}
.collection-products_sort-value:empty {
  display: none;
}
.collection-products_sort-form {
  position: static;
}
.collection-products_sort .collection-products_sort-select {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  opacity: 0;
  font-size: 1rem;
  cursor: pointer;
}
/* Ohne Script bleibt das Select sichtbar und bedienbar */
.collection-products_sort:not(:has(.collection-products_sort-value:not(:empty))) .collection-products_sort-select {
  position: static;
  width: auto;
  height: auto;
  padding: 0 var(--space--4);
  opacity: 1;
  font-size: inherit;
}
.collection-products_sort:has(.collection-products_sort-select:focus-visible) {
  outline: 0.125rem solid var(--color--dark);
  outline-offset: 0.125rem;
}
.collection-products_filter-toggle > * {
  pointer-events: none;
}

/* =============================================================
   120. Produkt-Header (Figma 10761-17209 / 10761-16406)
   Kategoriefarbe kommt als --product-color aus dem Metafeld
   theme_color der Produkt-Kollektion.
   ============================================================= */
.section_product-header .section_inner {
  --pc: var(--product-color, var(--cat--food));
}
/* Breadcrumb */
.product-header_breadcrumb-wrap {
  margin-bottom: var(--space--28);
}
.product-header_breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space--8);
  color: var(--color--grey-text, #656d63);
  font-size: var(--font-size--link-2, 0.875rem);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
}
.product-header_breadcrumb .li-guard {
  display: contents;
}
.product-header_crumb {
  color: #656d63;
  text-decoration: none;
  transition: color var(--transition--fast);
}
.product-header_crumb.is-current {
  color: var(--color--dark);
}
.product-header_crumb-sep {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  color: #656d63;
}
@media (hover: hover) {
  a.product-header_crumb:hover {
    color: var(--color--dark);
  }
}

/* Layout: 657 | 115 | 428 (+80 rechts) bei 1280 */
.product-header_layout {
  grid-template-columns: minmax(0, 657fr) minmax(0, 428fr);
  column-gap: 7.1875rem;
  padding-right: 5rem;
}
.product-header_left {
  gap: var(--space--8);
}

/* Galerie-Karte: weiss, 10px Radius, weicher Schatten nur aussen */
.product-header_gallery {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 40.0625rem;
  padding: 6.5rem 2rem 1rem;
  overflow: hidden;
  border-radius: 0.625rem;
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
}
.product-header_badges {
  top: 1.625rem;
  left: 0;
}
.product-header_badges .badge {
  height: 1.5rem;
  padding: 0 var(--space--12);
  border-radius: 0;
  background-color: var(--pc);
  color: var(--color--white);
  font-size: var(--font-size--link-2, 0.875rem);
  font-weight: 600;
  font-style: normal;
  line-height: 1.26;
  letter-spacing: 0.04em;
}
.product-header_certs {
  top: 0.9375rem;
  right: 1.75rem;
  align-items: center;
}
.product-header_cert-img {
  width: 5.1875rem;
  height: 4.375rem;
}
.product-header_main-swiper {
  flex: 1;
  width: 100%;
}
.product-header_main-slide,
.product-header_main-img,
.product-header_thumb,
.product-header_thumb-img {
  box-shadow: none;
  filter: none;
}
.product-header_main-img {
  max-height: 21.3125rem;
  max-width: 24.5625rem;
  margin: 0 auto;
  background: transparent;
}
/* Thumbs: Swiper mit zentrierten Slides, das aktive Bild steht mittig,
   Vorgaenger und Nachfolger bleiben links/rechts anklickbar */
.product-header_thumb-swiper {
  flex: none;
  width: 100%;
  max-width: 100%;
  margin: 5rem 0 0;
  padding: 0.0625rem 0;
}
.product-header_thumb.swiper-slide {
  flex-shrink: 0;
  width: 3.6875rem;
  height: 3.6875rem;
  border: 0.0625rem solid transparent;
  border-radius: 50%;
  background-color: var(--color--grey);
  cursor: pointer;
}
.product-header_thumb.swiper-slide-thumb-active {
  border-color: var(--pc);
}
.product-header_thumb-img {
  padding: 0.5rem;
}

/* Story-Karten: Zeilen nur, wenn gepflegt; Einzelteile fuellen die Zeile */
.product-header_story {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
}
.product-header_story-row {
  display: flex;
  gap: var(--space--8);
  min-height: 27.375rem;
}
.product-header_story-row > * {
  flex: 1 1 0;
  min-width: 0;
}
.product-header_story-media {
  position: relative;
  aspect-ratio: auto;
  min-height: 27.375rem;
  overflow: hidden;
  border-radius: 0.625rem;
}
.product-header_story-media.is-wide {
  min-height: 40rem;
}
.product-header_story-media > .media-frame_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-header_story-panel {
  aspect-ratio: auto;
  justify-content: flex-start;
  align-items: center;
  gap: 6.25rem;
  padding: 0 3.75rem 3.75rem;
  border-radius: 0.625rem;
  background-color: var(--pc);
}
.product-header_story-label {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 11.875rem;
  height: 6.25rem;
}
.product-header_story-label-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 7.5rem;
  height: 6.25rem;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.21);
}
.product-header_story-script {
  position: relative;
  margin-bottom: 0.75rem;
  color: var(--color--white);
  opacity: 0.8;
  font-size: 2rem;
  line-height: 1.66;
  white-space: nowrap;
}
.product-header_story-panel:not(:has(.product-header_story-label)) {
  justify-content: center;
  padding-top: 3.75rem;
}
.product-header_story-body {
  gap: 2.0625rem;
  max-width: 15.1875rem;
}
.product-header_story-title {
  margin: 0;
  color: var(--color--white);
  font-size: var(--font-size--subline-1, 1.25rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.product-header_story-text {
  color: var(--color--white);
  font-size: var(--font-size--body-2, 0.875rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.product-header_story-text p {
  margin: 0;
}

/* Detail-Spalte: Akkordeon als Liste von Panel-Triggern */
.product-header_accordion.accordion_list {
  gap: 2.25rem;
  border-top: 0;
}
.product-header_accordion .accordion_item {
  border-bottom: 0;
}
.product-header_accordion .accordion_toggle {
  padding: 0;
  gap: var(--space--16);
}
.product-header_accordion .accordion_title {
  font-size: var(--font-size--subline-1, 1.25rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.product-header_accordion .accordion_item .accordion_icon,
.product-header_accordion .accordion_item.is-open .accordion_icon {
  width: 1.25rem;
  height: 1.25rem;
  transform: none;
  transition: none;
}
.product-header_accordion .accordion_icon .icon-svg,
.product-header_accordion .accordion_icon svg {
  width: 100%;
  height: 100%;
}
.product-header_accordion .accordion_item.is-open .accordion_panel {
  grid-template-rows: none;
}
.product-header_accordion .accordion_toggle:focus-visible {
  outline: 0.125rem solid var(--color--dark);
  outline-offset: 0.25rem;
}

/* Haendler-Buttons */
.product-header_dealer-note .button {
  width: 100%;
}
.product-header_online-trigger {
  margin-top: var(--space--12);
  border: 0.0625rem solid var(--color--red);
  background-color: transparent;
  color: var(--color--dark);
}
.product-header_online-trigger[hidden] {
  display: none;
}
@media (hover: hover) {
  .product-header_online-trigger:hover {
    background-color: var(--color--red);
    color: var(--color--white);
  }
}

/* Onlinehaendler-Bloecke bleiben bis zum Verschieben unsichtbar */
.product-header_blocks > .online-dealer,
.product-header_blocks .online-dealer {
  display: none;
}

/* ---------- Seitenpanel (liegt am Ende von <body>) ---------- */
/* Nur <html> sperren: bekommt auch body overflow:hidden, wird body zum
   Scroll-Container und die sticky Galerie springt an ihre Ausgangsposition.
   scrollbar-gutter verhindert das seitliche Verspringen beim Sperren. */
html {
  scrollbar-gutter: stable;
}
html.is-scroll-locked {
  overflow: hidden;
}
.sidecard {
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
}
.sidecard .sidecard_backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: rgba(35, 46, 32, 0.4);
  -webkit-backdrop-filter: blur(0.15625rem);
  backdrop-filter: blur(0.15625rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.sidecard.is-open {
  pointer-events: auto;
}
.sidecard.is-open .sidecard_backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}
.sidecard .sidecard_panel {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
  width: min(32.375rem, calc(100% - 1.5rem));
  padding: 3.75rem 3.75rem 2.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--color--white);
  box-shadow: none;
  transform: translateX(calc(100% + 1rem));
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1), visibility 0s linear 0.35s;
}
.sidecard .sidecard_panel.is-active {
  transform: none;
  visibility: visible;
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1), visibility 0s;
}
.sidecard .sidecard_panel .accordion_panel-inner {
  flex: 1;
  overflow: visible;
}
.sidecard .accordion_panel-inner {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}
.sidecard .sidecard_close {
  position: absolute;
  top: 1.125rem;
  right: 1.125rem;
  width: auto;
  height: auto;
  padding: 0.375rem;
  border: 0;
  border-radius: var(--radius--pill);
  background-color: #f6f4f3;
  color: var(--color--dark);
}
.sidecard .sidecard_close svg {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
}
.sidecard_section {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
}
.sidecard_section.is-inline {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space--16);
}
.sidecard_section.is-inline > .sidecard_icon {
  margin-top: 0.25rem;
}
.sidecard_heading {
  display: flex;
  align-items: center;
  gap: var(--space--16);
}
.sidecard_icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--pc, var(--cat--food));
}
.sidecard_title {
  margin: 0;
  color: var(--color--dark);
  font-size: var(--font-size--subline-1, 1.25rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.sidecard_body.is-indented {
  padding-left: 3.25rem;
}
.sidecard .accordion_content {
  padding: 0;
  color: #656d63;
  font-size: var(--font-size--body-2, 0.875rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.sidecard .accordion_content p {
  margin: 0 0 1.25rem;
}
.sidecard .accordion_content p:last-child {
  margin-bottom: 0;
}
.sidecard .sidecard_nav {
  margin-top: auto;
  padding-top: var(--space--24);
}
.sidecard .sidecard_nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1.1875rem;
  border: 0;
  border-radius: var(--radius--pill);
  background-color: var(--color--grey);
  color: var(--color--dark);
  font-size: var(--font-size--link-3, 0.75rem);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.03em;
}
.sidecard_nav-icon {
  display: inline-flex;
  opacity: 0.5;
}
.sidecard_nav-btn.is-prev .sidecard_nav-icon {
  transform: scaleX(-1);
}
@media (hover: hover) {
  .sidecard .sidecard_nav-btn:hover {
    background-color: #ececec;
  }
}
@media (max-width: 767px) {
  .sidecard .sidecard_panel {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 3.5rem var(--space--20) var(--space--24);
  }
  .sidecard_body.is-indented {
    padding-left: 0;
  }
}

/* ---------- Onlinehaendler-Popup (Figma 12249-17997) ---------- */
.dealer-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space--20);
}
.dealer-modal[hidden] {
  display: none;
}
.dealer-modal_backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(35, 46, 32, 0.4);
  -webkit-backdrop-filter: blur(0.15625rem);
  backdrop-filter: blur(0.15625rem);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.dealer-modal_box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: min(41rem, 100%);
  max-height: calc(100vh - 2.5rem);
  padding: 3.75rem 3.75rem 2.5rem;
  overflow-y: auto;
  background-color: var(--color--white);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.dealer-modal.is-open .dealer-modal_backdrop,
.dealer-modal.is-open .dealer-modal_box {
  opacity: 1;
  transform: none;
}
.dealer-modal_close {
  position: absolute;
  top: 1.125rem;
  right: 1.125rem;
  display: flex;
  padding: 0.375rem;
  border-radius: var(--radius--pill);
  background-color: #f6f4f3;
  color: var(--color--dark);
}
.dealer-modal_close .icon-svg,
.dealer-modal_close svg {
  width: 0.875rem;
  height: 0.875rem;
}
.dealer-modal_title {
  margin: 0;
  color: var(--color--dark);
  font-size: var(--font-size--h3, 2rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.dealer-modal_list {
  display: flex;
  flex-direction: column;
}
.dealer-modal_list .online-dealer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--20);
  padding: 1.25rem 0;
  border-bottom: 0.0625rem solid #eeeeee;
}
.dealer-modal_list .online-dealer:first-child {
  padding-top: 0;
}
.online-dealer_body {
  display: flex;
  flex-direction: column;
  gap: var(--space--4);
}
.online-dealer_name {
  color: var(--color--dark);
  font-size: var(--font-size--h4, 1.5rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.online-dealer_link {
  color: var(--color--red);
  font-size: var(--font-size--link-1, 1rem);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.online-dealer_logo-wrap {
  flex: none;
  width: 10rem;
  height: 3.75rem;
}
.online-dealer_logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (hover: hover) {
  .online-dealer_link:hover {
    text-decoration: underline;
  }
}
@media (max-width: 767px) {
  .dealer-modal_box {
    padding: 3.5rem var(--space--20) var(--space--24);
    gap: var(--space--24);
  }
  .online-dealer_logo-wrap {
    width: 7rem;
    height: 3rem;
  }
}

/* Tablet/Mobil */
@media (max-width: 991px) {
  .product-header_layout {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 0;
  }
}
@media (max-width: 767px) {
  .product-header_gallery {
    min-height: 26rem;
    padding: 4.5rem var(--space--16) var(--space--16);
  }
  .product-header_thumb-swiper {
    margin-top: var(--space--32);
  }
  .product-header_story-row {
    flex-direction: column;
    min-height: 0;
  }
  .product-header_story-media {
    min-height: 22rem;
  }
  .product-header_story-media.is-wide {
    min-height: 24rem;
  }
  .product-header_story-panel {
    gap: var(--space--40);
    padding: 0 var(--space--24) var(--space--40);
  }
}

/* =============================================================
   121. Produktliste mobil (Figma 11126-1331)
   Zaehler hinter dem Titel, Chips je halbe Breite, Karten einspaltig
   ============================================================= */
.collection-products_sort-label.is-mobile {
  display: none;
}
.collection-products_count {
  margin-left: 0.25em;
}
@media (max-width: 767px) {
  .collection-products_head {
    gap: var(--space--20);
    margin-bottom: var(--space--40);
  }
  .collection-products_tools {
    width: 100%;
    gap: var(--space--8);
  }
  .collection-products_tools > .chip {
    flex: 1 1 0;
    min-width: 0;
    justify-content: space-between;
    padding: var(--space--12) var(--space--20) var(--space--12) var(--space--24);
  }
  .collection-products_sort-label:not(.is-mobile),
  .collection-products_sort .collection-products_sort-value {
    display: none;
  }
  .collection-products_sort-label.is-mobile {
    display: inline;
  }
  .collection-products_grid {
    gap: var(--space--20);
  }
}

/* =============================================================
   122. Produkt-Header Feinschliff (Figma 11126-19468)
   ============================================================= */
/* Herz gefuellt rot – Produktseite und alle Produktkarten */
.product-header_favorite,
.product-item_favorite {
  color: var(--color--red);
}
.product-header_favorite .icon-svg,
.product-header_favorite svg {
  width: 1.375rem;
  height: 1.375rem;
}

/* Vorteile: 16px Haken, 8px Abstand, Zeilen 4px */
.product-header_benefits.check-list {
  gap: var(--space--4);
}
.product-header_benefits .check-list_item {
  align-items: center;
  gap: var(--space--8);
  font-size: var(--font-size--body-1, 1rem);
  line-height: 1.7;
}
.product-header_benefits .check-list_icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  color: var(--pc);
}
.check-list_svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

/* Haendler-Bereich: keine graue Box, zwei volle Buttons */
.product-header_dealer-note {
  gap: var(--space--12);
  padding: 0;
  background-color: transparent;
  border-radius: 0;
}
.product-header_dealer-note .product-header_online-trigger {
  margin-top: 0;
}

/* Eigenschafts-Badges aus Figma (Vegan, Bio, Glutenfrei, Basenbildend) */
.product-header_icon-item:not([data-badge="custom"]):not([data-badge=""]) {
  width: 3.25rem;
  height: 4.4375rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--pc);
  opacity: 0.9;
}
.product-header_icon-item:not([data-badge="custom"]):not([data-badge=""]) .product-header_icon-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.product-header_badge,
.product-header_badge-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.product-header_icon-item[data-badge="custom"] {
  color: var(--pc);
  border-color: var(--pc);
}

/* Anker-Chips: hellgrau, ohne Rahmen */
.product-header_anchor-item .chip,
.product-header_anchor-item .chip.is-small {
  padding: 0.625rem var(--space--16) 0.5rem;
  border: 0;
  border-radius: var(--radius--pill);
  background-color: var(--color--grey);
  color: var(--color--dark);
  font-size: var(--font-size--link-2, 0.875rem);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
}
/* Detail-Spalte hat 20px gap, Chips brauchen 9px: gleichmaessig ueber margin-right */
.product-header_anchor-item {
  margin-right: -0.6875rem;
}
@media (hover: hover) {
  .product-header_anchor-item .chip:hover {
    background-color: #ececec;
    color: var(--color--dark);
  }
}
@media (max-width: 767px) {
  .product-header_benefits .check-list_item {
    font-size: 0.9375rem;
  }
}

/* =============================================================
   123. Produkt-Header: Abstaende 60px, Bild mittig, leere Sections
   ============================================================= */
/* Detail-Spalte: 20px gap + 40px = 60px zwischen den Gruppen (Figma) */
.product-header_results-title,
.product-header_accordion,
.product-header_cross {
  margin-top: 2.5rem;
}
.product-header_details:not(:has(.product-header_results-title)) .product-header_result {
  margin-top: 2.5rem;
}
.product-header_results-title {
  margin-bottom: -0.5rem;
}
/* 60px vor der Chip-Reihe: Abstand haengt am letzten Block davor */
.product-header_cross,
.product-header_details:not(:has(.product-header_cross)) .product-header_accordion {
  margin-bottom: 2.5rem;
}
.product-header_anchor-item[hidden] {
  display: none;
}
/* Produktbild mittig in der Galerie-Karte */
.product-header_main-swiper .swiper-wrapper {
  height: 100%;
}
.product-header_main-slide {
  height: auto;
  justify-content: center;
  align-items: center;
}
.product-header_main-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Empfehlungen ohne Produkte nicht anzeigen */
.section_product-recommended .section_inner:not(:has(.product-item_component)) {
  display: none;
}

/* =============================================================
   124. Produktseite unterhalb des Heros (Figma 10761-17209)
   ============================================================= */
/* --- Handschrift-Label mit hellem Kasten (Warum, FAQ, Erfahrungen) --- */
.product-why_label {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 11.875rem;
  height: 6.25rem;
  margin: 0 auto;
}
.product-why_label-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 7.5rem;
  height: 6.25rem;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.21);
}
.product-why_label .product-why_script {
  position: relative;
  margin-bottom: 0.75rem;
  white-space: nowrap;
}
.product-why_panel {
  padding-top: 0 !important;
}
.faq_promo-inner,
.experiences_promo-inner {
  position: relative;
  overflow: hidden;
}
.faq_promo-script,
.experiences_promo-script {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding-top: 3.25rem;
  white-space: nowrap;
}
.faq_promo-script::before,
.experiences_promo-script::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -100vh;
  bottom: 0.5rem;
  left: 50%;
  width: 7.25rem;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.21);
}
.faq_promo-inner,
.experiences_promo-inner {
  padding-top: 0 !important;
}

/* --- Zutaten & Naehrwerte (Figma 10896-27935 / 11331-17748) --- */
.section_ingredients {
  --pc: var(--cat--food);
}
.ingredients_stack {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.ingredients_head {
  margin-bottom: 0;
}
.ingredients_head .section-head_content {
  max-width: 40rem;
  margin: 0 auto;
}
.ingredients_head .section-head_eyebrow {
  color: #656d63;
}
.ingredients-slider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--24);
  padding: 0 5rem;
}
.ingredients-slider_btn {
  flex: none;
  background-color: var(--color--grey);
}
.ingredients-slider_center {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  flex: 1;
}
.ingredients-slider_label {
  color: #656d63;
  font-size: var(--font-size--subline-2, 1.0625rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
.ingredients-slider_swiper {
  width: 100%;
  max-width: 49.5rem;
}
.ingredients-slider_swiper .swiper-wrapper {
  align-items: stretch;
}
.ingredients-slider_swiper:not(.swiper-initialized) .swiper-wrapper {
  justify-content: center;
}
.ingredients-slider_slide.swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  width: 11.9rem;
  padding: 1.7rem 1.7rem 2.125rem;
}
.ingredients-slider_media {
  width: 9.92rem;
  height: 6.625rem;
}
.ingredients-slider_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: darken;
}
.ingredients-slider_title {
  color: var(--color--dark);
  font-size: 1.75rem;
  line-height: 1.66;
  text-align: center;
  white-space: nowrap;
}
.ingredients-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6.25rem;
  align-items: start;
  padding: 5rem;
  border-radius: 0.625rem;
  background-image: linear-gradient(180.58deg, #fafafa 5.26%, #fffcfc 65.37%, #ebebeb 117.58%);
}
.ingredients-card:not(:has(.nutrition-box)) {
  grid-template-columns: minmax(0, 1fr);
}
.nutrition-box {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
}
.nutrition-box_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
}
.nutrition-box_switch {
  position: relative;
}
.nutrition-box_toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space--8);
  color: var(--color--dark);
  font-size: var(--font-size--h4, 1.5rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.nutrition-box_caret {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--transition--fast);
}
.nutrition-box.is-open .nutrition-box_caret {
  color: var(--color--red);
  transform: rotate(180deg);
}
.nutrition-box.is-single .nutrition-box_caret {
  display: none;
}
.nutrition-box_toggle:disabled {
  cursor: default;
}
.nutrition-box_menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  width: 19.375rem;
  padding: 1.875rem;
  border-radius: 0.625rem;
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
}
.nutrition-box_menu[hidden] {
  display: none;
}
.nutrition-box_option {
  display: flex;
  align-items: center;
  gap: 1.375rem;
  color: var(--color--dark);
  font-size: var(--font-size--subline-1, 1.25rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  text-align: left;
}
.nutrition-box_option[hidden] {
  display: none;
}
.nutrition-box_radio {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 0.0625rem solid rgba(197, 57, 60, 0.4);
  border-radius: 50%;
}
.nutrition-box_option.is-active .nutrition-box_radio {
  border-color: var(--color--red);
}
.nutrition-box_option.is-active .nutrition-box_radio::after {
  content: "";
  position: absolute;
  inset: 0.3125rem;
  border-radius: 50%;
  background-color: var(--color--red);
}
.nutrition-box_unit {
  color: var(--color--dark);
  font-size: var(--font-size--body-2, 0.875rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.nutrition-box_table {
  overflow: hidden;
  border-radius: 0.625rem;
}
.nutrition-box_panel[hidden] {
  display: none;
}
.nutrition-box_panel .li-guard {
  display: contents;
}
.nutrition-box_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
  padding: var(--space--16) var(--space--24);
}
.nutrition-box_row.is-striped,
.nutrition-box_footnote.is-striped {
  background-color: rgba(188, 188, 188, 0.1);
}
.nutrition-box_label {
  color: #656d63;
  font-size: var(--font-size--body-1, 1rem);
  line-height: 1.7;
}
.nutrition-box_row.is-sub .nutrition-box_label::before {
  content: "•";
  margin: 0 0.5rem 0 0.75rem;
  font-size: 0.75em;
}
.nutrition-box_value {
  color: var(--color--dark);
  font-size: var(--font-size--link-2, 0.875rem);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-align: right;
}
.nutrition-box_panel[data-panel="naehrwerte"] .nutrition-box_row:first-child .nutrition-box_value {
  font-size: var(--font-size--link-1, 1rem);
}
.nutrition-box_footnote {
  padding: var(--space--16) var(--space--24);
  color: #656d63;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.nutrition-box_footnote p {
  margin: 0;
}
.ingredients-info {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}
.ingredients-info_item {
  display: flex;
  flex-direction: column;
  gap: var(--space--4);
}
.ingredients-info_item.is-inline {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space--16);
}
.ingredients-info_heading {
  display: flex;
  align-items: center;
  gap: var(--space--16);
}
.ingredients-info_icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  color: var(--pc);
}
.ingredients-info_item.is-inline .ingredients-info_icon {
  margin-top: 0.25rem;
}
.ingredients-info_title {
  margin: 0;
  color: var(--color--dark);
  font-size: var(--font-size--h4, 1.5rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.ingredients-info_body {
  padding-left: 3.25rem;
  color: #656d63;
  font-size: var(--font-size--body-1, 1rem);
  line-height: 1.7;
}
.ingredients-info_item.is-inline .ingredients-info_body {
  padding-left: 0;
}
.ingredients-info_body p {
  margin: 0 0 1.25rem;
}
.ingredients-info_body p:last-child {
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .ingredients-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.75rem;
    padding: 3rem var(--space--24);
  }
  .ingredients-slider {
    padding: 0;
  }
}
@media (max-width: 767px) {
  .ingredients_stack {
    gap: 3rem;
  }
  .ingredients-slider_btn {
    display: none;
  }
  .ingredients-slider_swiper {
    overflow: visible;
  }
  .ingredients-card {
    padding: 2rem var(--space--16);
  }
  .ingredients-info_body {
    padding-left: 0;
  }
  .nutrition-box_row {
    padding: var(--space--12) var(--space--16);
  }
  .nutrition-box_menu {
    width: min(19.375rem, 80vw);
  }
}

/* --- Broschuere (Figma 10761-17879) --- */
.brochure_panel-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 38.75rem);
  align-items: center;
  min-height: 25.5625rem;
  padding: 0.5rem;
  border-radius: 0.625rem;
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.brochure_body {
  gap: var(--space--16);
  max-width: 30.375rem;
  padding: 2rem 0 2rem 4.5rem;
  color: var(--color--white);
}
.brochure_eyebrow {
  font-size: var(--font-size--subline-2, 1.0625rem);
  font-weight: 600;
  font-style: italic;
}
.brochure_heading {
  font-size: var(--font-size--h3, 2rem);
  letter-spacing: -0.03em;
}
.brochure_text {
  max-width: 23.875rem;
  font-size: var(--font-size--body-2, 0.875rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.brochure_body .button {
  width: 16.5625rem;
  max-width: 100%;
  margin-top: var(--space--24);
}
.brochure_media {
  position: relative;
  height: 24.5625rem;
  min-height: 0;
  border-radius: 0.625rem;
  background-color: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.brochure_stack {
  position: absolute;
  inset: 0;
}
.brochure_page {
  position: absolute;
  top: 50%;
  display: block;
  width: 14.6rem;
  height: 14.86rem;
  box-shadow: 0 0.2rem 3.25rem rgba(0, 0, 0, 0.2);
  transform: translateY(-50%);
}
.brochure_page.is-left {
  left: 5rem;
}
.brochure_page.is-right {
  right: 5rem;
}
.brochure_page.is-cover {
  left: 50%;
  width: 17.42rem;
  height: 17.3125rem;
  box-shadow: 1.41rem 0.64rem 3.81rem rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
}
.brochure_page-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brochure-modal {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: flex;
  background-color: rgba(35, 46, 32, 0.9);
}
.brochure-modal[hidden] {
  display: none;
}
.brochure-modal_frame {
  flex: 1;
}
.brochure-modal_frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background-color: var(--color--white);
}
.brochure-modal_close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  display: flex;
  padding: 0.625rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--white);
  color: var(--color--dark);
  box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.2);
}
.brochure-modal_close .icon-svg,
.brochure-modal_close svg {
  width: 1.125rem;
  height: 1.125rem;
}
@media (max-width: 991px) {
  .brochure_panel-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .brochure_body {
    padding: 2.5rem var(--space--24) 1rem;
  }
  .brochure_media {
    height: 20rem;
  }
}
@media (max-width: 767px) {
  .brochure_page {
    width: 9rem;
    height: 9.2rem;
  }
  .brochure_page.is-left {
    left: 1rem;
  }
  .brochure_page.is-right {
    right: 1rem;
  }
  .brochure_page.is-cover {
    width: 11rem;
    height: 11rem;
  }
}

/* --- Erfahrungen (Figma 10761-17736) --- */
.experiences_layout {
  grid-template-columns: minmax(0, 19.8125rem) minmax(0, 1fr);
  gap: 1.375rem;
  align-items: start;
}
.experiences_promo {
  position: sticky;
  top: calc(var(--nav-height, 6rem) + 1rem);
}
.experiences_promo-inner {
  gap: 3.5rem;
  padding: 0 var(--space--24) 2rem;
  border-radius: 0.625rem;
  text-align: center;
}
.experiences_promo-heading {
  font-size: 1.625rem;
}
.experiences_promo-body .button {
  width: 13.125rem;
  max-width: 100%;
  margin-top: var(--space--20);
}
.experiences_items {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.experiences_card {
  padding: 3.25rem 3rem 3rem;
  border: 0;
  border-radius: 0.625rem;
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
}
.experiences_card-head {
  align-items: center;
  font-size: 0.8125rem;
}
.experiences_card-script {
  margin-left: auto;
  color: #656d63;
  font-size: 1.625rem;
}
.experiences_card-title {
  margin-top: var(--space--24);
  font-size: 1.125rem;
  font-weight: 700;
  font-style: italic;
}
.experiences_card-text {
  margin-top: var(--space--8);
  font-size: var(--font-size--body-2, 0.875rem);
  line-height: 1.8;
}
.experiences_card-person {
  margin-top: var(--space--32);
}
.experiences_card-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
}
.experiences_card-name {
  font-size: 0.75rem;
  font-weight: 600;
}
.experiences_card-role {
  color: #656d63;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}
.experiences_more {
  width: 100%;
  margin-top: var(--space--32);
  border: 0.0625rem solid #d9d9d9;
  background-color: transparent;
}
@media (max-width: 991px) {
  .experiences_layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .experiences_promo {
    position: static;
  }
}
@media (max-width: 767px) {
  .experiences_card {
    padding: 2rem var(--space--20);
  }
  .experiences_card-script {
    display: none;
  }
}

/* --- Produkt-FAQ (Figma 10761-18017) --- */
.section_product-faq .faq_layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 24.375rem);
  gap: 8rem;
  align-items: start;
}
.section_product-faq .accordion_list {
  gap: 1.5rem;
  border-top: 0;
}
.section_product-faq .accordion_item {
  border-bottom: 0;
}
.section_product-faq .accordion_toggle {
  padding: var(--space--12) 0;
}
.section_product-faq .accordion_title {
  font-size: var(--font-size--h4, 1.5rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.section_product-faq .accordion_icon-circle {
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background-color: var(--color--grey);
  color: #656d63;
}
.section_product-faq .accordion_content {
  max-width: 35.75rem;
  color: #656d63;
  font-size: var(--font-size--body-2, 0.875rem);
  line-height: 1.9;
}
.section_product-faq .faq_promo-inner {
  gap: 4.5rem;
  padding-bottom: 2rem;
  border-radius: 0.625rem;
  text-align: center;
}
.section_product-faq .faq_promo-heading {
  font-size: var(--font-size--h3, 2rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.section_product-faq .faq_promo-body .button {
  width: 16.125rem;
  max-width: 100%;
  margin-top: var(--space--24);
}
@media (max-width: 991px) {
  .section_product-faq .faq_layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
}
@media (max-width: 767px) {
  .section_product-faq .accordion_title {
    font-size: 1.125rem;
  }
}

/* --- Weitere Produkte (Figma 10761-18061) --- */
.section_product-recommended .section-head {
  margin-bottom: var(--space--40);
}
.section_product-recommended .section-head_eyebrow {
  color: #656d63;
}
.recommended_swiper .swiper-slide.recommended_slide {
  width: 17.9375rem;
}

/* Produkt-Header: linke Spalte (Galerie + Stories) sticky, Details scrollen */
.product-header_layout {
  align-items: start;
}
.product-header_left {
  position: sticky;
  /* unter der Logo-Unterkante (127px) statt nur unter der Nav-Zeile */
  top: calc(max(var(--nav-height, 6rem), 7.9375rem) + 2rem);
}
.product-header_details {
  position: static;
}
@media (max-width: 991px) {
  .product-header_left {
    position: static;
  }
}

/* =============================================================
   125. Produkt-Header: Story-Formate, Abstaende, Mobil-Layout
   (Figma 10761-17291, 11298-17155, 11298-17176)
   ============================================================= */
/* Abstaende Detail-Spalte: Checks -> Buttons 32px, Buttons -> Badges 32px,
   Badges -> Akkordeon 60px (Spalten-gap 20px + Margin) */
.section_product-header .product-header_dealer-note,
.section_product-header .product-header_details .product-header_icon-item {
  margin-top: 0.75rem;
}
.section_product-header .product-header_details .product-header_accordion {
  margin-top: 2.5rem;
}

/* Story-Karten Desktop: zwei gleich breite Karten 438px hoch,
   breites Bild 640px hoch */
.product-header_story-heading,
.product-header_story-dots {
  display: none;
}
.product-header_story-track {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
}
.product-header_story-row {
  height: 27.375rem;
  min-height: 0;
}
/* Basis 50 % statt 0: bei 0 rechnet Flexbox das Padding der Textkarte
   zusaetzlich drauf und die Karte wird breiter als das Bild */
.product-header_story-row > * {
  flex: 1 1 50%;
  min-width: 0;
}
.product-header_story-media {
  min-height: 0;
}
.product-header_story-media.is-wide {
  aspect-ratio: auto;
  height: 40rem;
  min-height: 0;
}
/* Textblock ist 243px breit, darf die Karte nicht aufdruecken */
.product-header_story-panel {
  min-width: 0;
  padding: 0 2.5rem 3.75rem;
}
.product-header_story-body {
  width: 15.1875rem;
  max-width: 100%;
}

@media (max-width: 767px) {
  /* Reihenfolge mobil: Galerie, Details bis Badges, Story, Akkordeon, Ergaenzungen, Anker */
  .product-header_layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space--16) 0.75rem;
  }
  .product-header_left,
  .product-header_details {
    display: contents;
  }
  .product-header_gallery {
    order: 0;
    flex: 0 0 100%;
    width: 100%;
  }
  .product-header_title-row {
    margin-top: 1.8125rem;
  }
  .product-header_icon-item:first-child {
    margin-left: auto;
  }
  .product-header_icon-item:not(:has(+ .product-header_icon-item)) {
    margin-right: auto;
  }
  .section_product-header .product-header_details .product-header_accordion {
    margin-top: 2.75rem;
  }
  .product-header_layout:has(.product-header_story) .product-header_accordion {
    margin-top: 2.125rem;
  }
  .product-header_anchor-item {
    margin-right: -0.1875rem;
  }

  /* Story als Slider: 288 x 360, 8px Abstand, rechts angeschnitten */
  .product-header_story {
    order: 7;
    flex: 0 0 100%;
    min-width: 0;
    margin-top: 2.125rem;
    gap: 0;
  }
  .product-header_story-heading {
    display: block;
    margin-bottom: 1.25rem;
    color: var(--color--dark);
    font-size: var(--font-size--subline-1, 1.25rem);
    font-weight: 600;
    font-style: italic;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }
  .product-header_story-heading:empty {
    display: none;
  }
  .product-header_story-track {
    position: relative;
    flex-direction: row;
    gap: var(--space--8);
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
    scroll-padding-inline: 1.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .product-header_story-track::-webkit-scrollbar {
    display: none;
  }
  .product-header_story-row {
    display: contents;
  }
  .product-header_story-track .product-header_story-panel,
  .product-header_story-track .product-header_story-media,
  .product-header_story-track .product-header_story-media.is-wide {
    flex: 0 0 18rem;
    width: 18rem;
    height: 22.5rem;
    min-height: 0;
    scroll-snap-align: start;
  }
  .product-header_story-track .product-header_story-panel {
    justify-content: space-between;
    gap: 0;
    padding: 0 1.8125rem 3.75rem;
  }
  .product-header_story-label-bg {
    width: 5.875rem;
    height: 5.375rem;
  }
  .product-header_story-script {
    margin-bottom: 1.375rem;
  }
  .product-header_story-body {
    width: 14.375rem;
  }
  .product-header_story-dots {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
  }
  .product-header_story-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.791875rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .product-header_story-dot::before {
    content: "";
    width: 0.395625rem;
    height: 0.395625rem;
    border-radius: 50%;
    background-color: #d9d9d9;
  }
  .product-header_story-dot.is-active::before {
    background-color: var(--color--red);
  }
}

/* Akkordeon-Trigger: volle Zeilenhoehe klickbar. Der Zeilenabstand (36px)
   liegt jetzt als Padding im Button statt als gap der Liste; die
   Aussenabstaende sind um die 18px Padding reduziert, Optik bleibt gleich. */
.product-header_accordion.accordion_list {
  gap: 0;
}
.product-header_accordion .accordion_toggle {
  padding: 1.125rem 0;
}
.section_product-header .product-header_details .product-header_accordion {
  margin-top: 1.375rem;
}
.product-header_details:not(:has(.product-header_cross)) .product-header_accordion {
  margin-bottom: 1.375rem;
}
.section_product-header .product-header_details .product-header_cross {
  margin-top: 1.375rem;
}
@media (max-width: 767px) {
  .section_product-header .product-header_details .product-header_accordion {
    margin-top: 1.625rem;
  }
  .product-header_layout:has(.product-header_story) .product-header_accordion {
    margin-top: 1rem;
  }
}

/* Story-Bilder: kein Zoom beim Hover */
@media (hover: hover) {
  .product-header_story-media:hover .media-frame_img {
    transform: none;
  }
}

/* Ideale Ergaenzungen: Karten nach Figma 10761-17488 (mobil 11298-18207) */
.section_product-header .product-header_cross {
  gap: var(--space--12);
}
.section_product-header .product-header_cross-title {
  color: var(--color--dark);
  font-size: var(--font-size--subline-1, 1.25rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.section_product-header .product-header_cross-item {
  gap: 1.5rem;
  height: 9.0625rem;
  padding: 0 1.75rem 0 0.625rem;
  overflow: hidden;
  border: 0;
  border-radius: 0.625rem;
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 3.8125rem 0 rgba(0, 0, 0, 0.06);
}
.section_product-header .product-header_cross-media {
  width: 7.5rem;
  height: 8.25rem;
}
.section_product-header .product-header_cross-body {
  gap: 1rem;
}
.product-header_cross-rating {
  gap: 0.25rem;
}
.product-header_cross-rating .star-rating_track,
.product-header_cross-rating .star-rating_fill {
  gap: 0.0625rem;
}
.product-header_cross-rating .star-rating_icon,
.product-header_cross-rating .star-rating_track > svg,
.product-header_cross-rating .star-rating_fill > svg {
  width: 0.6875rem;
  height: 0.6875rem;
}
.product-header_cross-rating .star-rating_value {
  margin-left: 0;
  color: var(--color--grey-text, #656d63);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
}
.product-header_cross-link {
  display: block;
  margin-bottom: -0.5625rem;
  color: inherit;
  text-decoration: none;
}
.section_product-header .product-header_cross-name {
  display: block;
  color: var(--color--dark);
  font-size: var(--font-size--subline-1, 1.25rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.section_product-header .product-header_cross-text {
  color: var(--color--grey-text, #656d63);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.section_product-header .product-header_cross-add {
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--color--red);
  color: var(--color--white);
}
.section_product-header .product-header_cross-add .icon-svg {
  width: 1.125rem;
  height: 1.125rem;
}
@media (hover: hover) {
  .section_product-header .product-header_cross-add:hover {
    background-color: var(--color--dark);
  }
}
@media (max-width: 767px) {
  .section_product-header .product-header_cross-item {
    gap: 0.75rem;
    height: 8.25rem;
    padding-right: 1rem;
  }
  .section_product-header .product-header_cross-media {
    width: 5.75rem;
    height: 6.3125rem;
  }
  /* mobil ohne Button (Figma), Bild und Titel verlinken */
  .section_product-header .product-header_cross-add {
    display: none;
  }
}

/* =============================================================
   126. Produkt Warum (Figma 10761-17601, mobil 11695-22721)
   Bild vollflaechig 852px, gruene Karte 584 x 730 links (61px Abstand),
   Farbe aus der Kategorie. Mobil: Bild 375 quadratisch, Karte randlos darunter.
   ============================================================= */
.section_product-why .product-why_bg {
  inset: 0 0 auto 0;
  height: max(var(--why-min-height, 37.5rem), 53.25rem);
  overflow: hidden;
}
.product-why_overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)), linear-gradient(192.3deg, rgba(1, 58, 29, 0) 35.639%, rgba(1, 58, 29, 0.3) 70.855%);
  pointer-events: none;
}
.section_product-why .product-why_content-wrap {
  align-items: flex-start;
  min-height: max(var(--why-min-height, 37.5rem), 53.25rem);
  padding: 3.8125rem;
}
.section_product-why .product-why_content-wrap > .container-large {
  width: 100%;
  max-width: none;
  margin: 0;
}
.section_product-why .product-why_panel {
  align-items: center;
  gap: 4.25rem;
  width: 36.5rem;
  min-height: 45.625rem;
  padding: 0 6.25rem 3.75rem !important;
  border-radius: 0.625rem;
  -webkit-backdrop-filter: blur(4.1875rem);
  backdrop-filter: blur(4.1875rem);
}
.section_product-why .product-why_label {
  flex: none;
}
.section_product-why .product-why_label .product-why_script {
  margin-bottom: 0.625rem;
  color: var(--color--white);
  opacity: 0.8;
  font-size: 2rem;
  line-height: 1.66;
}
/* Ueberschrift + Intro als ein Block mit 12px Abstand
   (.u-text-width ist display:contents, daher am h2 selbst) */
.section_product-why .product-why_panel .product-why_heading {
  margin-bottom: calc(-4.25rem + 0.75rem);
}
.section_product-why .product-why_heading {
  margin: 0;
  color: var(--color--white);
  font-size: var(--font-size--h3, 2rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.section_product-why .product-why_intro {
  max-width: 23.375rem;
  color: var(--color--white);
  font-size: var(--font-size--body-2, 0.875rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.section_product-why .product-why_accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin-top: 0;
  border: 0;
}
.section_product-why .product-why_accordion .accordion_item {
  border: 0;
  opacity: 0.5;
  transition: opacity var(--transition--fast, 0.2s);
}
.section_product-why .product-why_accordion .accordion_item.is-open {
  opacity: 1;
}
/* Zeilenabstand 46px als Padding im Button: ganze Zeile klickbar */
.section_product-why .product-why_accordion .accordion_toggle {
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
  padding: 1.4375rem 0;
  color: var(--color--white);
}
.section_product-why .product-why_accordion .accordion_item:first-child .accordion_toggle {
  padding-top: 0;
}
.section_product-why .product-why_accordion .accordion_item:last-child:not(.is-open) .accordion_toggle {
  padding-bottom: 0;
}
.section_product-why .product-why_accordion .accordion_title {
  font-size: var(--font-size--subline-1, 1.25rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.section_product-why .accordion_icon-circle {
  flex: none;
  width: 1.9245625rem;
  height: 1.9245625rem;
  background-color: var(--color--white);
  color: var(--color--dark);
}
.section_product-why .accordion_icon-circle .icon-svg {
  width: 0.6663rem;
  height: 0.6663rem;
}
.section_product-why .product-why_accordion .accordion_panel-inner {
  margin-top: -0.6875rem;
  padding-bottom: 1.4375rem;
}
.section_product-why .product-why_accordion .accordion_content {
  max-width: 19.125rem;
  color: var(--color--white);
  font-size: var(--font-size--body-2, 0.875rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
@media (hover: hover) {
  .section_product-why .product-why_accordion .accordion_item:not(.is-open):hover {
    opacity: 0.75;
  }
}

@media (max-width: 767px) {
  .section_product-why .product-why_bg {
    position: relative;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .section_product-why .product-why_content-wrap {
    min-height: 0;
    padding: 0;
  }
  .section_product-why .product-why_panel {
    gap: 3.5rem;
    width: 100%;
    min-height: 0;
    padding: 0 1.25rem 3.75rem !important;
    border-radius: 0;
  }
  .section_product-why .product-why_label .product-why_script {
    margin-bottom: 0;
    font-size: 2.5rem;
  }
  .section_product-why .product-why_panel .product-why_heading {
    max-width: 18.3125rem;
    font-size: 2rem;
    margin-bottom: calc(-3.5rem + 0.75rem);
  }
  .section_product-why .product-why_intro {
    max-width: 18.3125rem;
  }
  /* Zeilenabstand 28px */
  .section_product-why .product-why_accordion .accordion_toggle {
    padding: 0.875rem 0;
  }
  .section_product-why .product-why_accordion .accordion_panel-inner {
    margin-top: -0.125rem;
    padding-bottom: 0.875rem;
  }
  .section_product-why .accordion_icon-circle {
    width: 1.75rem;
    height: 1.75rem;
  }
  .section_product-why .product-why_accordion .accordion_content {
    max-width: 17.8125rem;
  }
}

/* Zubereitungs-Tabs: echte Tab-Buttons (Tastatur, Fokusring) */
.product-steps_menu .tabs_link {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background-color: transparent;
  font-family: inherit;
  cursor: pointer;
}
.product-steps_menu .tabs_link:focus-visible {
  outline: 0.125rem solid var(--color--dark);
  outline-offset: 0.25rem;
  border-radius: 0.125rem;
}
.product-steps_tab[hidden] {
  display: none;
}
.product-steps_tab:focus,
.product-steps_tab:focus-visible {
  outline: none;
}
.product-steps_menu[hidden] {
  display: none;
}

/* =============================================================
   127. Produkt Anleitung (Figma 10761-17688, mobil 11298-18972)
   Kopf links, Tabs rechts unten; Bild 361px; 4 Spalten mit
   Nummer zwischen zwei Linien. Mobil: Liste mit senkrechten Linien.
   ============================================================= */
.section_product-steps .section-head {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space--32);
  margin-bottom: 2.5rem;
}
.section_product-steps .section-head_content {
  flex: 1 1 auto;
  gap: var(--space--16);
}
.section_product-steps .section-head_eyebrow {
  color: var(--color--grey-text, #656d63);
  font-size: var(--font-size--subline-2, 1.0625rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
/* Tabs: aktiver Tab dunkel mit 1px Linie, inaktive 50 % */
.section_product-steps .product-steps_menu {
  display: flex;
  align-items: flex-start;
  gap: var(--space--24);
}
.section_product-steps .product-steps_menu .tabs_link {
  padding: 0 0 0.25rem;
  border-bottom: 0.0625rem solid transparent;
  color: var(--color--dark);
  opacity: 0.5;
  font-size: var(--font-size--link-2, 0.875rem);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  transition: opacity var(--transition--fast, 0.2s);
}
.section_product-steps .product-steps_menu .tabs_link.is-active {
  border-bottom-color: #0f5636;
  color: var(--color--dark);
  opacity: 1;
}
@media (hover: hover) {
  .section_product-steps .product-steps_menu .tabs_link:not(.is-active):hover {
    color: var(--color--dark);
    opacity: 0.8;
  }
}
.section_product-steps .product-steps_media {
  height: 22.5625rem;
  margin-bottom: 3.75rem;
  overflow: hidden;
  border-radius: 0.625rem;
}
.product-steps_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_product-steps .product-steps_list {
  display: flex;
  gap: 0;
}
.section_product-steps .product-steps_item {
  flex: 1 1 0;
  min-width: 0;
  gap: 1.875rem;
}
.section_product-steps .product-steps_item::before {
  display: none;
}
.product-steps_marker {
  display: flex;
  align-items: center;
  gap: 1.875rem;
  width: 100%;
}
.product-steps_marker::before,
.product-steps_marker::after {
  content: "";
  flex: 1 1 0;
  height: 0.0625rem;
  background-color: rgba(92, 127, 83, 0.2);
}
.section_product-steps .product-steps_number {
  padding: 0;
  background: none;
  color: var(--pc, #5c7f53);
  font-size: 2.25rem;
  line-height: 1.66;
  white-space: nowrap;
}
.product-steps_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6875rem;
  padding: 0 1.25rem;
}
.section_product-steps .product-steps_title {
  margin: 0;
  color: var(--color--dark);
  font-size: var(--font-size--h4, 1.5rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.section_product-steps .product-steps_text {
  max-width: 16.25rem;
  color: var(--color--grey-text, #656d63);
  font-size: var(--font-size--body-2, 0.875rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

@media (max-width: 767px) {
  .section_product-steps .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .section_product-steps .section-head_content {
    gap: 0.75rem;
  }
  .section_product-steps .product-steps_media {
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: 2.5rem;
  }
  .section_product-steps .product-steps_list {
    flex-direction: column;
  }
  .section_product-steps .product-steps_item {
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 1.625rem;
    text-align: left;
  }
  .product-steps_marker {
    flex: none;
    flex-direction: column;
    gap: 0;
    width: 2rem;
  }
  .product-steps_marker::before,
  .product-steps_marker::after {
    flex: none;
    width: 0.0625rem;
    height: 2.8125rem;
  }
  .product-steps_body {
    flex: 1 1 0;
    align-items: flex-start;
    padding: 0;
  }
  .section_product-steps .product-steps_text {
    max-width: none;
  }
}

/* Plus/Minus im runden Akkordeon-Icon (Warum, FAQ): per CSS gezeichnet.
   Das Plus-SVG ist ein einziger Pfad, das Ausblenden von path:last-child
   hat live das ganze Icon entfernt statt nur den senkrechten Strich. */
.accordion_icon-circle {
  position: relative;
  transform: none !important;
}
.accordion_icon-circle > .icon-svg {
  display: none;
}
.accordion_icon-circle::before,
.accordion_icon-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34.6%;
  height: 0.09375rem;
  border-radius: 0.0625rem;
  background-color: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--transition--fast, 0.2s), opacity var(--transition--fast, 0.2s);
}
.accordion_icon-circle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.accordion_item.is-open .accordion_icon-circle::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* Warum: Korrekturen nach Live-Screenshot
   1) Verlauf lag ueber der Karte (z-index ohne eigenen Stacking-Context)
   2) Abstand im zugeklappten Panel liess Text herausschauen
   3) Bild waechst mit der Karte mit, statt darunter abzubrechen */
.section_product-why .product-why_bg {
  inset: 0;
  z-index: 0;
  height: auto;
  isolation: isolate;
}
.section_product-why .product-why_content-wrap {
  z-index: 1;
}
.section_product-why .product-why_accordion .accordion_panel-inner {
  margin-top: 0;
  padding-bottom: 0;
}
.section_product-why .product-why_accordion .accordion_content {
  padding-bottom: 1.4375rem;
}
.section_product-why .product-why_accordion .accordion_item.is-open .accordion_toggle {
  padding-bottom: 0.75rem;
}
.section_product-why .product-why_accordion .accordion_item:last-child .accordion_content {
  padding-bottom: 0;
}
@media (max-width: 767px) {
  .section_product-why .product-why_bg {
    inset: auto;
    height: auto;
  }
  .section_product-why .product-why_accordion .accordion_panel-inner {
    margin-top: 0;
    padding-bottom: 0;
  }
  .section_product-why .product-why_accordion .accordion_content {
    padding-bottom: 0.875rem;
  }
  .section_product-why .product-why_accordion .accordion_item.is-open .accordion_toggle {
    padding-bottom: 0.75rem;
  }
}

/* Warum: Inhalt auf Container-Breite, Bild bleibt full width.
   Bild hat eine feste Hoehe (clipped), damit es beim Auf-/Zuklappen
   eines Eintrags nicht mitskaliert und "springt". */
.section_product-why .product-why_content-wrap {
  padding: 3.8125rem var(--space--80);
}
.section_product-why .product-why_content-wrap > .container-large {
  width: 100%;
  max-width: var(--container--large);
  margin-left: auto;
  margin-right: auto;
}
.section_product-why .product-why_bg .full-bleed-bg {
  top: 0;
  bottom: auto;
  height: max(100%, 62.5rem);
  object-position: center top;
}
@media (max-width: 991px) {
  .section_product-why .product-why_content-wrap {
    padding-left: var(--space--40);
    padding-right: var(--space--40);
  }
}
@media (max-width: 767px) {
  .section_product-why .product-why_content-wrap {
    padding: 0;
  }
  .section_product-why .product-why_bg .full-bleed-bg {
    bottom: 0;
    height: 100%;
    object-position: center;
  }
}

/* =============================================================
   128. Broschuere Banner (Figma 10761-19674)
   Eine Section fuer Produkt- und Inhaltsseiten. Farbe per
   --brochure-bg (Setting, auf Produktseiten Kategoriefarbe).
   ============================================================= */
.section_brochure .brochure_panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 38.75rem);
  align-items: center;
  gap: 5.375rem;
  min-height: 25.5625rem;
  padding: 0.5rem;
  overflow: hidden;
  border-radius: 0.625rem;
  background-color: var(--brochure-bg, var(--cat--food));
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
  color: var(--color--white);
}
.section_brochure .brochure_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  max-width: none;
  padding: 0 0 0 4.5rem;
}
.brochure_copy {
  display: flex;
  flex-direction: column;
  gap: var(--space--16);
  max-width: 30.375rem;
}
.section_brochure .brochure_eyebrow {
  font-size: var(--font-size--subline-2, 1.0625rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  opacity: 1;
}
.section_brochure .brochure_heading {
  margin: 0;
  color: var(--color--white);
  font-size: var(--font-size--h3, 2rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.section_brochure .brochure_text {
  max-width: 23.875rem;
  color: var(--color--white);
  font-size: var(--font-size--body-2, 0.875rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.section_brochure .brochure_body .button {
  align-self: flex-start;
  width: 16.5625rem;
  max-width: 100%;
  height: 3.25rem;
  margin-top: 0;
}
.section_brochure .brochure_media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24.5625rem;
  padding: 0;
  overflow: hidden;
  border-radius: 0.625rem;
  background-color: rgba(255, 255, 255, 0.06);
}
.brochure_cover {
  width: 17.42rem;
  height: 17.3125rem;
  box-shadow: 1.41rem 0.64rem 3.81rem rgba(0, 0, 0, 0.25);
}
.brochure_cover img,
.brochure_cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brochure_cover:not(:has(img)) {
  display: none;
}

/* Modal: Vollbild mit Leiste (Titel, neuer Tab, Schliessen) */
.brochure-modal {
  flex-direction: column;
}
.brochure-modal_bar {
  display: flex;
  align-items: center;
  gap: var(--space--16);
  padding: 0.75rem 0.75rem 0.75rem 1.5rem;
  color: var(--color--white);
}
.brochure-modal_title {
  flex: 1 1 auto;
  margin: 0;
  color: var(--color--white);
  font-size: var(--font-size--subline-1, 1.25rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
.brochure-modal_external {
  color: var(--color--white);
  font-size: var(--font-size--link-2, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.brochure-modal .brochure-modal_close {
  position: static;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
}
.brochure-modal_close:focus-visible,
.brochure-modal_external:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.25rem;
}
@media (hover: hover) {
  .brochure-modal_external:hover {
    text-decoration: none;
  }
}
.brochure-modal .brochure-modal_frame {
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 991px) {
  .section_brochure .brochure_panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .section_brochure .brochure_body {
    padding: 2.5rem var(--space--24) 0;
  }
  .section_brochure .brochure_media {
    height: 20rem;
  }
}
@media (max-width: 767px) {
  .section_brochure .brochure_body {
    gap: 2rem;
  }
  .section_brochure .brochure_body .button {
    width: 100%;
  }
  .brochure_cover {
    width: 12rem;
    height: 11.9375rem;
  }
  .brochure-modal_external {
    display: none;
  }
}

/* =============================================================
   129. Rechtliches (Impressum, Datenschutz, AGB …)
   Figma 10919-25752 / 10919-26095. Inhalt aus page.content:
   h2 = Kapitel (32px), h3 = Unterpunkt (24px), p = Text.
   ============================================================= */
.legal_stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.125rem;
}
.legal_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
.legal_eyebrow {
  color: var(--color--grey-text, #656d63);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.legal_title {
  max-width: 42.5rem;
  margin: 0;
  color: var(--color--dark);
  font-size: 3.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.03em;
}
.legal_card {
  width: 100%;
  max-width: 63.75rem;
  padding: 5rem;
  border-radius: 0.625rem;
  background-image: linear-gradient(181deg, #fafafa 5.26%, #fffcfc 65.37%, #ebebeb 117.58%);
}
.legal_content {
  color: var(--color--grey-text, #656d63);
  font-size: var(--font-size--body-1, 1rem);
  line-height: 1.7;
}
.legal_content > :first-child {
  margin-top: 0;
}
.legal_content > :last-child {
  margin-bottom: 0;
}
.legal_content h2 {
  margin: 5rem 0 2rem;
  color: var(--color--dark);
  font-size: var(--font-size--h3, 2rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.legal_content h3,
.legal_content h4 {
  margin: 2.5rem 0 0.5rem;
  color: var(--color--dark);
  font-size: var(--font-size--h4, 1.5rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
/* Unterpunkt direkt nach Kapitel: 32px statt 40px */
.legal_content h2 + h3,
.legal_content h2 + h4 {
  margin-top: 0;
}
/* Impressum: nur h3-Bloecke, 24px Abstand zwischen den Bloecken */
.section_legal .legal_content:not(:has(h2)) h3 {
  margin-top: 1.5rem;
}
.legal_content p,
.legal_content ul,
.legal_content ol {
  margin: 0 0 1em;
}
.legal_content h3 + p,
.legal_content h4 + p {
  margin-top: 0;
}
.legal_content ul,
.legal_content ol {
  padding-left: 1.25em;
}
.legal_content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
@media (hover: hover) {
  .legal_content a:hover {
    color: var(--color--dark);
  }
}
.legal_content strong {
  color: var(--color--dark);
}
@media (max-width: 991px) {
  .legal_card {
    padding: 3rem;
  }
}
@media (max-width: 767px) {
  .legal_stack {
    gap: 2rem;
  }
  .legal_head {
    gap: 1rem;
  }
  .legal_eyebrow {
    font-size: 1.0625rem;
  }
  .legal_title {
    font-size: 2.25rem;
  }
  .legal_card {
    padding: 2rem 1.25rem;
  }
  .legal_content h2 {
    margin: 3rem 0 1.5rem;
    font-size: 1.625rem;
  }
  .legal_content h3,
  .legal_content h4 {
    margin-top: 2rem;
    font-size: 1.25rem;
  }
}

/* Social Media: Laufband oben in der Section (Figma 10919-25757)
   40px oben, 40px bis zum Slider, Handschrift 40px mit 70 % Deckkraft */
.social-media_ticker {
  padding-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.social-media_ticker .script-ticker_item {
  gap: 3.3125rem;
  padding-right: 3.3125rem;
  color: var(--color--dark);
}
.social-media_ticker .script-ticker_item .heading-style-script {
  opacity: 0.7;
}
.social-media_ticker .script-ticker_dot {
  width: 0.375rem;
  height: 0.375rem;
}
@media (max-width: 767px) {
  .social-media_ticker {
    padding-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .social-media_ticker .script-ticker_item {
    gap: 2rem;
    padding-right: 2rem;
  }
}

/* 130. Testimonials (Figma 11109-19928) */
.section_testimonials-list .testimonials-list_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75rem;
}

.section_testimonials-list .testimonials-list_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--24);
  width: 100%;
  text-align: center;
}

.section_testimonials-list .testimonials-list_eyebrow {
  color: var(--section-eyebrow, #656d63);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
}

.section_testimonials-list .testimonials-list_title {
  max-width: 42.5rem;
  margin: 0;
  color: var(--color--dark);
  font-size: 3.25rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.section_testimonials-list .testimonials-list_list {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  width: 100%;
  max-width: 55.3125rem;
}

/* Karte: Medium links (344) | 1px Fuge | Textfeld rechts (540) */
.section_testimonials-list .testimonials-list_item {
  display: grid;
  grid-template-columns: 344fr 540fr;
  gap: 1px;
  min-height: 34.625rem;
  border-radius: 0.625rem;
  overflow: hidden;
  filter: drop-shadow(0 0 1.90625rem rgba(0, 0, 0, 0.06));
}

.section_testimonials-list .testimonials-list_media {
  position: relative;
  overflow: hidden;
  background-color: var(--color--grey);
}

.section_testimonials-list .testimonials-list_video,
.section_testimonials-list .testimonials-list_img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section_testimonials-list .testimonials-list_controls {
  position: absolute;
  top: 0.75rem;
  right: 1.375rem;
  z-index: 1;
  display: flex;
  gap: var(--space--8);
}

.section_testimonials-list .testimonials-list_control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  border: 0;
  border-radius: 4.6875rem;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(0.2671875rem);
  backdrop-filter: blur(0.2671875rem);
  color: var(--color--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.section_testimonials-list .testimonials-list_control:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.125rem;
}

.section_testimonials-list .testimonials-list_icon {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

/* Icon-Zustaende ueber aria-pressed */
.section_testimonials-list [data-tl-play] .is-play,
.section_testimonials-list [data-tl-play][aria-pressed="true"] .is-pause,
.section_testimonials-list [data-tl-sound] .is-sound,
.section_testimonials-list [data-tl-sound][aria-pressed="true"] .is-muted {
  display: none;
}

.section_testimonials-list [data-tl-play][aria-pressed="true"] .is-play,
.section_testimonials-list [data-tl-sound][aria-pressed="true"] .is-sound {
  display: block;
}

@media (hover: hover) {
  .section_testimonials-list .testimonials-list_control:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }
}

.section_testimonials-list .testimonials-list_panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 8.75rem 4.625rem 3rem 5rem;
  background-color: var(--color--white);
  overflow: hidden;
}

.section_testimonials-list .testimonials-list_script {
  position: absolute;
  top: 1.5rem;
  right: 2.25rem;
  font-size: 2rem;
  line-height: 1.66;
  letter-spacing: 0.002em;
  color: var(--color--dark);
  opacity: 0.5;
  white-space: nowrap;
  pointer-events: none;
}

.section_testimonials-list .testimonials-list_content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 24.125rem;
}

.section_testimonials-list .testimonials-list_rating {
  display: flex;
  align-items: center;
  gap: var(--space--8);
}

.section_testimonials-list .testimonials-list_stars,
.section_testimonials-list .testimonials-list_stars .star-rating_track,
.section_testimonials-list .testimonials-list_stars .star-rating_fill {
  gap: 0;
}

.section_testimonials-list .testimonials-list_star {
  display: block;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

.section_testimonials-list .testimonials-list_rating-value {
  color: var(--color--dark);
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.section_testimonials-list .testimonials-list_quote {
  margin: 0;
  color: var(--color--dark);
  font-size: 1.625rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

.section_testimonials-list .testimonials-list_text {
  max-width: 21.9375rem;
  color: var(--color--dark);
  font-size: 1rem;
  line-height: 1.7;
}

.section_testimonials-list .testimonials-list_text p {
  margin: 0;
}

@media (max-width: 991px) {
  .section_testimonials-list .testimonials-list_title {
    font-size: 2.75rem;
  }

  .section_testimonials-list .testimonials-list_item {
    grid-template-columns: 5fr 7fr;
    min-height: 30rem;
  }

  .section_testimonials-list .testimonials-list_panel {
    padding: 6.5rem 2.5rem 2.5rem;
  }
}

@media (max-width: 767px) {
  .section_testimonials-list .testimonials-list_container {
    gap: 2.5rem;
  }

  .section_testimonials-list .testimonials-list_head {
    gap: var(--space--12);
  }

  .section_testimonials-list .testimonials-list_eyebrow {
    font-size: 1.0625rem;
  }

  .section_testimonials-list .testimonials-list_title {
    font-size: 2.125rem;
  }

  .section_testimonials-list .testimonials-list_list {
    gap: 1.5rem;
  }

  .section_testimonials-list .testimonials-list_item {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .section_testimonials-list .testimonials-list_media {
    aspect-ratio: 4 / 5;
  }

  .section_testimonials-list .testimonials-list_panel {
    padding: 4.5rem 1.5rem 2rem;
  }

  .section_testimonials-list .testimonials-list_script {
    top: 0.75rem;
    right: 1.5rem;
    font-size: 1.75rem;
  }

  .section_testimonials-list .testimonials-list_quote {
    font-size: 1.375rem;
  }

  .section_testimonials-list .testimonials-list_content,
  .section_testimonials-list .testimonials-list_text {
    max-width: none;
  }
}

@media (max-width: 479px) {
  .section_testimonials-list .testimonials-list_media {
    aspect-ratio: 3 / 4;
  }
}

/* 131. Downloads (Figma 10886-16924 / 10886-17228 / 11040-14192 / 11202-19298) */
.section_downloads [hidden] {
  display: none !important;
}

/* Kopf: Eyebrow + Titel zentriert */
.section_downloads .downloads_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 3.75rem;
  text-align: center;
}
.section_downloads .downloads_eyebrow {
  margin: 0;
  color: #656d63;
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.section_downloads .downloads_title {
  max-width: 42.5rem;
  margin: 0;
  color: var(--color--dark);
  font-size: 3.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Suche */
.section_downloads .downloads_search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  margin: 0 0 1.75rem;
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 1.90625rem rgba(0, 0, 0, 0.06);
}
.section_downloads .downloads_search-icon {
  display: flex;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color--dark);
  font-size: 1.25rem;
}
.section_downloads .downloads_search-icon .icon-svg {
  width: 100%;
  height: 100%;
}
.section_downloads .downloads_search-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color--dark);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.7;
}
.section_downloads .downloads_search-input::placeholder {
  color: #656d63;
  opacity: 1;
}
.section_downloads .downloads_search-input:focus {
  outline: 0;
}
.section_downloads .downloads_search:focus-within {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
.section_downloads .downloads_search-button {
  flex: none;
  min-height: 3rem;
  padding: 1rem 3.5rem;
}

/* Layout: Sidebar + Raster */
.section_downloads .downloads_layout {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  gap: 3.75rem;
  align-items: start;
}

/* Kategorie-Filter */
.section_downloads .downloads_filter {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border-radius: var(--radius--medium);
  background-color: var(--color--grey);
}
.section_downloads .downloads_filter-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.section_downloads .downloads_filter-button {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--radius--pill);
  background-color: transparent;
  color: var(--color--dark);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition--fast, 0.2s), color var(--transition--fast, 0.2s);
}
.section_downloads .downloads_filter-button.is-active {
  background-color: var(--color--red);
  color: var(--color--white);
}
.section_downloads .downloads_filter-button:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
@media (hover: hover) {
  .section_downloads .downloads_filter-button:not(.is-active):hover {
    background-color: var(--color--white);
  }
}

.section_downloads .downloads_filter-label {
  flex: 1;
  min-width: 0;
}
.section_downloads .downloads_filter-caret {
  display: none;
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color--red);
  font-size: 0.875rem;
  transition: transform var(--transition--fast, 0.2s);
}
.section_downloads .downloads_filter-caret .icon-svg {
  width: 100%;
  height: 100%;
}
.section_downloads .has-sub .downloads_filter-caret {
  display: flex;
}
.section_downloads .downloads_filter-button[aria-expanded="true"] .downloads_filter-caret {
  transform: rotate(180deg);
}
/* Aufgeklappte Kategorie: weisse Karte mit Produktliste (Figma 10886-17228) */
.section_downloads .downloads_filter-item.is-expanded {
  margin: 0 -0.5rem;
  padding-bottom: 1rem;
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
}
.section_downloads .downloads_filter-item.is-expanded > .downloads_filter-button {
  padding-left: 2rem;
  background-color: transparent;
}
.section_downloads .downloads_filter-button.is-current:not(.is-active) {
  color: var(--color--red);
}
.section_downloads .downloads_filter-sublist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section_downloads .downloads_filter-subbutton {
  display: block;
  width: calc(100% - 3.5rem);
  margin: 0 1.5rem 0 2rem;
  padding: 0.5rem 1.5rem;
  border: 0;
  border-radius: var(--radius--pill);
  background-color: transparent;
  color: var(--color--dark);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.03em;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition--fast, 0.2s), color var(--transition--fast, 0.2s);
}
.section_downloads .downloads_filter-subbutton.is-active {
  background-color: var(--color--red);
  color: var(--color--white);
}
.section_downloads .downloads_filter-subbutton:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
@media (hover: hover) {
  .section_downloads .downloads_filter-subbutton:not(.is-active):hover {
    background-color: var(--color--grey);
  }
  .section_downloads .downloads_filter-item.is-expanded > .downloads_filter-button:not(.is-active):hover {
    background-color: transparent;
    color: var(--color--red);
  }
}

/* Ohne Zugang: Vollbild-Hero unter transparentem Header (Figma 11040-14192) */
.section_downloads .downloads_locked {
  position: relative;
  display: flex;
  min-height: 56.25rem;
  overflow: hidden;
  color: var(--color--white);
}
.section_downloads .downloads_locked-bg {
  position: absolute;
  inset: 0;
  background-color: var(--color--dark);
  background-image: linear-gradient(150deg, var(--color--green-dark) 0%, var(--color--dark) 65%);
}
.section_downloads .downloads_locked-img {
  object-position: 50% 100%;
}
.section_downloads .downloads_locked-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(3, 32, 9, 0.5) 0%, rgba(3, 32, 9, 0) 16rem);
  background-color: rgba(3, 32, 9, 0.4);
}
.section_downloads .downloads_locked-wrap {
  position: relative;
  width: 100%;
  padding-top: 17.25rem;
  padding-bottom: 5rem;
}
.section_downloads .downloads_locked-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  max-width: 39rem;
  margin: 0 auto;
  text-align: center;
}
.section_downloads .downloads_locked-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.section_downloads .downloads_locked-eyebrow {
  margin: 0;
  color: var(--color--white);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.section_downloads .downloads_locked-title {
  margin: 0;
  color: var(--color--white);
  font-size: 3.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.03em;
}
.section_downloads .downloads_locked-text {
  max-width: 29.125rem;
  color: var(--color--white);
  font-size: 1rem;
  line-height: 1.7;
}
.section_downloads .downloads_locked-text p {
  margin: 0;
}
.section_downloads .downloads_locked-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}
.section_downloads .downloads_locked-button {
  width: 21.75rem;
  max-width: 100%;
  padding: 1rem 3.5rem;
}
.section_downloads .downloads_locked-pending {
  max-width: 29.125rem;
  margin: 0;
  color: var(--color--white);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
.section_downloads .downloads_locked-request {
  margin: 0;
  color: var(--color--white);
  font-size: 1rem;
  line-height: 1.7;
}
.section_downloads .downloads_locked-link {
  color: var(--color--white);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-position: from-font;
}
.section_downloads .downloads_locked-link:focus-visible,
.section_downloads .downloads_locked-button:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.1875rem;
}
@media (hover: hover) {
  .section_downloads .downloads_locked-link:hover {
    color: rgba(255, 255, 255, 0.8);
  }
}

/* Raster */
.section_downloads .downloads_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75rem;
  min-width: 0;
}
.section_downloads .downloads_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
  row-gap: 2.5rem;
  width: 100%;
}
.section_downloads .downloads_item {
  display: flex;
  min-width: 0;
}

/* Karte */
.section_downloads .downloads_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 0.5rem 0.5rem 2.25rem;
  overflow: hidden;
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
}
.section_downloads .downloads_media {
  position: relative;
  width: 100%;
  height: 16rem;
  flex: none;
  overflow: hidden;
  border-radius: var(--radius--medium);
  background-color: var(--color--grey);
}
.section_downloads .downloads_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_downloads .downloads_media[data-contain="true"] {
  background-color: var(--color--white);
}
.section_downloads .downloads_media[data-contain="true"] .downloads_img {
  padding: 2.5rem 3rem 1.5rem;
  object-fit: contain;
}
.section_downloads .downloads_badge {
  position: absolute;
  top: 0.625rem;
  left: 0;
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0.05rem 0.976rem 0;
  background-color: var(--badge-bg, var(--color--red));
  color: var(--color--white);
  font-size: 0.9375rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.66;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.section_downloads .downloads_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 21.25rem;
  padding: 0 0.5rem;
  text-align: center;
}
.section_downloads .downloads_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.section_downloads .downloads_text-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.section_downloads .downloads_card-title {
  margin: 0;
  color: var(--color--dark);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.section_downloads .downloads_card-text {
  color: rgba(35, 46, 32, 0.7);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.section_downloads .downloads_card-text p {
  margin: 0;
}
.section_downloads .downloads_meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 1.3125rem;
  color: var(--color--dark);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.section_downloads .downloads_meta-dot {
  width: 0.125rem;
  height: 0.125rem;
  border-radius: 50%;
  background-color: currentColor;
}

/* Download-Links */
.section_downloads .downloads_links,
.section_downloads .downloads_link-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.75rem;
}
.section_downloads .downloads_link-item {
  display: contents;
}
.section_downloads .downloads_link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color--red);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-position: from-font;
  transition: color var(--transition--fast, 0.2s);
}
.section_downloads .downloads_link .icon-svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
}
.section_downloads .downloads_link:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
@media (hover: hover) {
  .section_downloads .downloads_link:hover {
    color: var(--color--red-dark);
  }
}
.section_downloads .downloads_sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Status + Mehr laden */
.section_downloads .downloads_status {
  width: 100%;
}
.section_downloads .downloads_status:empty {
  display: none;
}
.section_downloads .downloads_empty {
  margin: 0;
  color: rgba(35, 46, 32, 0.7);
  font-size: 1rem;
  text-align: center;
}
.section_downloads .downloads_more-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.section_downloads .downloads_more-wrap:not(:has(.downloads_more:not([hidden]))) {
  display: none;
}
.section_downloads .downloads_more {
  min-width: 16.875rem;
  padding: 1rem 3.5rem;
}

@media (max-width: 991px) {
  .section_downloads .downloads_locked {
    min-height: 50rem;
  }
  .section_downloads .downloads_locked-wrap {
    padding-top: 13rem;
  }
  .section_downloads .downloads_locked-title {
    font-size: 2.75rem;
  }
  .section_downloads .downloads_head {
    margin-bottom: 2.5rem;
  }
  .section_downloads .downloads_title {
    font-size: 2.75rem;
  }
  .section_downloads .downloads_layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  /* Filter: Pills umbrechen, Unterliste als eigene Zeile */
  .section_downloads .downloads_filter {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.5rem;
  }
  .section_downloads .downloads_filter-item {
    display: contents;
  }
  .section_downloads .downloads_filter-button {
    width: auto;
    padding: 0.625rem 1.125rem;
    white-space: nowrap;
  }
  .section_downloads .downloads_filter-item.is-expanded .downloads_filter-button {
    padding: 0.625rem 1.125rem;
    background-color: var(--color--white);
  }
  .section_downloads .downloads_filter-sub {
    flex-basis: 100%;
    padding: 0.5rem;
    border-radius: var(--radius--medium);
    background-color: var(--color--white);
  }
  .section_downloads .downloads_filter-sublist {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .section_downloads .downloads_filter-subbutton {
    width: auto;
    margin: 0;
    padding: 0.5rem 1rem;
  }
  .section_downloads .downloads_content {
    gap: 2.5rem;
  }
}

@media (max-width: 767px) {
  .section_downloads .downloads_locked {
    min-height: 40rem;
    min-height: max(40rem, 100svh);
  }
  .section_downloads .downloads_locked-wrap {
    padding-top: 10rem;
    padding-bottom: 3rem;
  }
  .section_downloads .downloads_locked-content {
    gap: 1.5rem;
  }
  .section_downloads .downloads_locked-head {
    gap: 0.75rem;
  }
  .section_downloads .downloads_locked-eyebrow {
    font-size: 1rem;
  }
  .section_downloads .downloads_locked-title {
    font-size: 2.25rem;
  }
  .section_downloads .downloads_head {
    gap: 1rem;
    margin-bottom: 2rem;
  }
  .section_downloads .downloads_eyebrow {
    font-size: 1rem;
  }
  .section_downloads .downloads_title {
    font-size: 2.25rem;
  }
  .section_downloads .downloads_search {
    margin-bottom: 1.25rem;
  }
  .section_downloads .downloads_search-button {
    padding: 1rem 1.5rem;
  }
  .section_downloads .downloads_layout {
    gap: 1.5rem;
  }
  .section_downloads .downloads_grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.25rem;
  }
  .section_downloads .downloads_card {
    gap: 1.5rem;
    padding-bottom: 1.75rem;
  }
  .section_downloads .downloads_media {
    height: auto;
    aspect-ratio: 424 / 256;
  }
  .section_downloads .downloads_card-title {
    font-size: 1.25rem;
  }
}

@media (max-width: 479px) {
  .section_downloads .downloads_search {
    padding-left: 0.75rem;
    gap: 0.5rem;
  }
  .section_downloads .downloads_search-button {
    padding: 1rem 1.25rem;
  }
  .section_downloads .downloads_more {
    width: 100%;
    min-width: 0;
  }
}

/* --- Downloads: Zugang erhalten (Figma 11202-19298) --- */
.section_dl-access .dl-access_layout {
  display: grid;
  grid-template-columns: minmax(0, 28.5rem) minmax(0, 43.75rem);
  justify-content: space-between;
  align-items: start;
  gap: 3.75rem;
}
.section_dl-access .dl-access_intro {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.section_dl-access .dl-access_head {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.section_dl-access .dl-access_eyebrow {
  margin: 0;
  color: #656d63;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.section_dl-access .dl-access_title {
  max-width: 26.3125rem;
  margin: 0;
  color: var(--color--dark);
  font-size: 2.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.section_dl-access .dl-access_benefits {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: 24.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section_dl-access .dl-access_benefit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color--dark);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
}
.section_dl-access .dl-access_check-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--color--red);
}
.section_dl-access .dl-access_card {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 3.75rem 5rem;
  border-radius: var(--radius--medium);
  background-color: var(--color--grey);
}
.section_dl-access .dl-access_card-title {
  margin: 0;
  color: var(--color--dark);
  font-size: 2rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.section_dl-access .dl-access_form {
  display: flex;
  flex-direction: column;
}

.section_dl-access .dl-access_fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.section_dl-access .dl-access_row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

/* Feld mit Floating-Label: Label liegt als Platzhalter im Feld und
   rutscht bei Fokus/Inhalt als 12px-Label nach oben */
.section_dl-access .dl-access_field {
  position: relative;
  display: flex;
  flex-direction: column;
}

.section_dl-access .dl-access_input {
  display: block;
  width: 100%;
  height: 3.25rem;
  margin: 0;
  padding: 1.5rem 1.375rem 0.375rem;
  border: 0.0625rem solid transparent;
  border-radius: 0;
  background-color: var(--color--white);
  color: var(--color--dark);
  font-family: var(--font--family);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  transition: border-color var(--transition--fast), box-shadow var(--transition--fast);
}

.section_dl-access .dl-access_input.is-select {
  padding-right: 3.25rem;
  cursor: pointer;
}

.section_dl-access .dl-access_input.is-textarea {
  height: 9.375rem;
  min-height: 7rem;
  padding-top: 2.125rem;
  padding-bottom: 1.25rem;
  line-height: 1.5;
  resize: vertical;
}

.section_dl-access .dl-access_input:focus {
  outline: none;
}

.section_dl-access .dl-access_input:focus-visible {
  border-color: var(--color--neutral-dark);
  box-shadow: inset 0 0 0 0.0625rem var(--color--neutral-dark);
}

.section_dl-access .dl-access_label {
  position: absolute;
  top: 1.625rem;
  left: 1.375rem;
  right: 1.375rem;
  transform: translateY(-50%);
  color: #656d63;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: top var(--transition--fast), font-size var(--transition--fast), transform var(--transition--fast);
}

.section_dl-access .dl-access_field.is-select .dl-access_label {
  right: 3.25rem;
}

.section_dl-access .dl-access_field.is-textarea .dl-access_label {
  top: 1.5rem;
  transform: none;
}

.section_dl-access .dl-access_input:focus + .dl-access_label,
.section_dl-access .dl-access_input:not(:placeholder-shown) + .dl-access_label,
.section_dl-access .dl-access_field.is-select:not(:has(option[value=""]:checked)) .dl-access_label,
.section_dl-access .dl-access_field.is-textarea .dl-access_input:focus + .dl-access_label,
.section_dl-access .dl-access_field.is-textarea .dl-access_input:not(:placeholder-shown) + .dl-access_label {
  top: 0.375rem;
  transform: none;
  font-size: 0.75rem;
}

.section_dl-access .dl-access_caret {
  position: absolute;
  top: 1.625rem;
  right: 1.375rem;
  display: flex;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: var(--color--dark);
  font-size: 1rem;
  pointer-events: none;
}

.section_dl-access .dl-access_caret .icon-svg {
  width: 1rem;
  height: 1rem;
}

/* Fehlerzustand */
.section_dl-access .dl-access_input[aria-invalid="true"] {
  border-color: var(--color--error-dark);
}

.section_dl-access .dl-access_input[aria-invalid="true"] + .dl-access_label {
  color: var(--color--error-dark);
}

.section_dl-access .dl-access_error {
  display: block;
  margin-top: 0.375rem;
  color: var(--color--error-dark);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.section_dl-access .dl-access_error:empty {
  display: none;
}

.section_dl-access .dl-access_alert,
.section_dl-access .dl-access_success {
  margin-bottom: var(--space--16);
  padding: var(--space--12) var(--space--16);
  font-size: 0.875rem;
  line-height: 1.5;
}

.section_dl-access .dl-access_alert {
  background-color: var(--color--error);
  color: var(--color--error-dark);
}

.section_dl-access .dl-access_alert ul {
  margin: 0;
  padding-left: 1.125rem;
}

.section_dl-access .dl-access_success {
  background-color: var(--color--success);
  color: var(--color--success-dark);
}

.section_dl-access .dl-access_success p {
  margin: 0;
}

/* Checkboxen */
.section_dl-access .dl-access_checks {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 0.875rem;
}

.section_dl-access .dl-access_check {
  display: flex;
  align-items: flex-start;
  gap: var(--space--8);
}

.section_dl-access .dl-access_check-input {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0.125rem 0 0;
  border: 0.0625rem solid transparent;
  border-radius: 0;
  background-color: var(--color--white);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 0.75rem;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--transition--fast), border-color var(--transition--fast);
}

.section_dl-access .dl-access_check-input:checked {
  border-color: var(--color--red);
  background-color: var(--color--red);
  background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.5 12L13 4.5' stroke='white' stroke-width='2'/%3E%3C/svg%3E);
}

.section_dl-access .dl-access_check-input:focus {
  outline: none;
}

.section_dl-access .dl-access_check-input:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}

.section_dl-access .dl-access_check-input[aria-invalid="true"] {
  border-color: var(--color--error-dark);
}

.section_dl-access .dl-access_check-label {
  color: var(--color--dark);
  font-size: var(--font-size--body-3);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
  cursor: pointer;
}

.section_dl-access .dl-access_check-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.section_dl-access .dl-access_check-link:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}

.section_dl-access .dl-access_check-wrap .dl-access_error {
  margin-left: 1.5rem;
}

.section_dl-access .dl-access_actions {
  display: flex;
  margin-top: var(--space--40);
}

.section_dl-access .dl-access_submit {
  width: 16.875rem;
  padding: var(--space--16) 3.5rem;
}

.section_dl-access .dl-access_submit:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}

.section_dl-access .dl-access_submit[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

@media (hover: hover) {
  .section_dl-access .dl-access_check-link:hover {
    color: var(--color--red);
  }
  .section_dl-access .dl-access_input:hover:not(:focus) {
    border-color: var(--border-color--strong);
  }
}

@media (max-width: 991px) {
  .section_dl-access .dl-access_layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .section_dl-access .dl-access_card {
    padding: 3rem 2.5rem;
  }
}

@media (max-width: 767px) {
  .section_dl-access .dl-access_head {
    gap: 0.75rem;
  }
  .section_dl-access .dl-access_eyebrow {
    font-size: 1rem;
  }
  .section_dl-access .dl-access_title {
    font-size: 1.75rem;
  }
  .section_dl-access .dl-access_card {
    gap: 1.5rem;
    padding: 2.5rem 1.25rem;
  }
  .section_dl-access .dl-access_card-title {
    font-size: 1.5rem;
  }
  .section_dl-access .dl-access_row {
    grid-template-columns: minmax(0, 1fr);
  }
  .section_dl-access .dl-access_actions {
    margin-top: 2rem;
  }
  .section_dl-access .dl-access_submit {
    width: 100%;
  }
}

/* 132. Termine (Figma 10886-16593) */
/* Termine-Uebersicht: Tabs, Sortierung, Karten-Grid. Alles auf
   .section_event-index gescoped, damit der Termine-Slider (Produktseiten,
   Snippet event-card) unberuehrt bleibt. */
.section_event-index [hidden] {
  display: none !important;
}

.section_event-index .event-index_head {
  margin-bottom: var(--space--48);
}

.event-index_sr {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Toolbar: Kategorie-Tabs + Sortierung --- */
.section_event-index .event-index_toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
  margin-bottom: 1.875rem;
}

.section_event-index .event-index_tabs {
  display: flex;
  align-items: center;
  gap: var(--space--4);
  min-width: 0;
  padding: var(--space--4);
  border-radius: var(--radius--pill);
  background-color: var(--color--grey);
}

.section_event-index .event-index_tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 9.375rem;
  padding: var(--space--12) var(--space--24);
  border: 0;
  border-radius: var(--radius--pill);
  background-color: transparent;
  color: var(--color--dark);
  font-family: var(--font--family);
  font-size: 0.875rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition--fast), color var(--transition--fast);
}

.section_event-index .event-index_tab.is-active {
  background-color: var(--color--red);
  color: var(--color--white);
}

@media (hover: hover) {
  .section_event-index .event-index_tab:not(.is-active):hover {
    color: var(--color--red);
  }
}

.section_event-index .event-index_sort {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--space--4);
  height: 3.125rem;
  padding: 0 var(--space--24);
  border-radius: var(--radius--pill);
  background-color: var(--color--grey);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  white-space: nowrap;
}

.section_event-index .event-index_sort:focus-within {
  outline: 0.125rem solid var(--color--green);
  outline-offset: 0.125rem;
}

.section_event-index .event-index_sort-label {
  color: var(--color--dark);
  cursor: pointer;
}

.section_event-index .event-index_select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--color--red);
}

.section_event-index .event-index_select {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: var(--space--12) 1.125rem var(--space--12) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color--red);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.section_event-index .event-index_select:focus,
.section_event-index .event-index_select:focus-visible {
  outline: none;
}

.section_event-index .event-index_caret {
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.75rem;
  height: 0.75rem;
  transform: translateY(-50%);
  pointer-events: none;
}

/* --- Grid --- */
.section_event-index .event-index_list {
  display: grid;
  grid-template-columns: repeat(var(--event-columns, 3), minmax(0, 1fr));
  gap: 3.125rem var(--space--16);
}

.section_event-index .event-index_item {
  display: flex;
  min-width: 0;
}

/* --- Karte --- */
.section_event-index .event-index_card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius--large);
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 3.8125rem 0 rgba(0, 0, 0, 0.06);
  color: var(--color--dark);
}

.section_event-index .event-index_media {
  position: relative;
  margin: var(--space--8) var(--space--8) 0;
  aspect-ratio: 400 / 245;
  overflow: hidden;
  border-radius: var(--radius--small);
  background-color: var(--color--grey);
}

.section_event-index .event-index_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section_event-index .event-index_badge {
  position: absolute;
  top: var(--space--12);
  left: 0;
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0.0625rem 0.975rem 0;
  background-color: var(--color--red);
  color: var(--color--white);
  font-size: 0.9375rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.66;
  letter-spacing: var(--tracking--subline);
  white-space: nowrap;
}

.section_event-index .event-index_body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  padding: 2.5rem 2.5rem 3.125rem;
  text-align: center;
}

.section_event-index .event-index_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4375rem;
  width: 100%;
}

.section_event-index .event-index_date {
  display: inline-flex;
  align-items: center;
  gap: var(--space--8);
  margin: 0;
  color: var(--text-color--secondary);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
}

.section_event-index .event-index_date-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.section_event-index .event-index_copy {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
  width: 100%;
}

.section_event-index .event-index_title {
  margin: 0;
  color: var(--color--dark);
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: var(--tracking--h4);
}

.section_event-index .event-index_text,
.section_event-index .event-index_text p {
  margin: 0;
  color: #656d63;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
}

.section_event-index .event-index_text p + p {
  margin-top: var(--space--8);
}

.section_event-index .event-index_link {
  display: inline-flex;
  align-items: center;
  gap: var(--space--8);
  margin-top: auto;
  color: var(--color--dark);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  text-decoration: none;
  transition: color var(--transition--fast);
}

.section_event-index .event-index_link-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color--red);
}

@media (hover: hover) {
  .section_event-index .event-index_link:hover {
    color: var(--color--red);
  }
}

.section_event-index .event-index_empty {
  margin: 0;
  padding: var(--space--48) var(--space--24);
  border-radius: var(--radius--large);
  background-color: var(--color--grey);
  color: var(--text-color--secondary);
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
}

@media (max-width: 991px) {
  .section_event-index .event-index_toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space--12);
  }

  .section_event-index .event-index_tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .section_event-index .event-index_tabs::-webkit-scrollbar {
    display: none;
  }

  .section_event-index .event-index_tab {
    width: auto;
    min-width: 7.5rem;
  }

  .section_event-index .event-index_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space--32) var(--space--16);
  }

  .section_event-index .event-index_body {
    padding: var(--space--32) var(--space--24) var(--space--40);
  }
}

@media (max-width: 767px) {
  .section_event-index .event-index_toolbar {
    margin-bottom: var(--space--24);
  }

  .section_event-index .event-index_tabs {
    align-self: stretch;
  }

  .section_event-index .event-index_tab {
    min-width: 0;
    padding: var(--space--12) var(--space--20);
  }

  .section_event-index .event-index_sort {
    height: 2.75rem;
    padding: 0 var(--space--20);
  }

  .section_event-index .event-index_list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space--24);
  }

  .section_event-index .event-index_body {
    gap: var(--space--24);
    padding: var(--space--28) var(--space--20) var(--space--32);
  }

  .section_event-index .event-index_content {
    gap: var(--space--16);
  }

  .section_event-index .event-index_title {
    font-size: var(--font-size--h5);
  }
}

@media (max-width: 479px) {
  .section_event-index .event-index_tab {
    padding: var(--space--12) var(--space--16);
  }

  .section_event-index .event-index_date {
    font-size: 0.9375rem;
  }
}

/* 133. FAQ-Seite (Figma 10850-10130) */
.section_faq .faq_top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75rem;
  margin-bottom: 6.875rem;
}
.section_faq .faq_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  text-align: center;
}
.section_faq .faq_eyebrow {
  margin: 0;
  color: #656d63;
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.section_faq .faq_title {
  max-width: 42.5rem;
  margin: 0;
  color: var(--color--dark);
  font-size: 3.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Themen-Filter */
.section_faq .faq_filter {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.25rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--grey);
}
.section_faq .faq_filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.75rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--radius--pill);
  background-color: transparent;
  color: var(--color--dark);
  font-family: inherit;
  font-size: var(--font-size--link-2, 0.875rem);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition--fast, 0.2s), color var(--transition--fast, 0.2s);
}
.section_faq .faq_filter-button:first-child {
  min-width: 9.375rem;
}
.section_faq .faq_filter-button.is-active {
  background-color: var(--color--red);
  color: var(--color--white);
}
.section_faq .faq_filter-button:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
@media (hover: hover) {
  .section_faq .faq_filter-button:not(.is-active):hover {
    background-color: var(--color--white);
  }
}

/* Gruppen */
.section_faq .faq_groups {
  display: flex;
  flex-direction: column;
}
.section_faq .faq_group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8.5rem;
  padding-bottom: 6.25rem;
  margin-bottom: 6.25rem;
  border-bottom: 0.0625rem solid rgba(101, 109, 99, 0.2);
}
.section_faq .faq_group:last-child {
  margin-bottom: 0;
}
.section_faq .faq_group[hidden] {
  display: none;
}
.section_faq .faq_group-title {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: var(--color--dark);
  font-size: var(--font-size--h2, 2.25rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.section_faq .faq_list {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  width: 46.5rem;
  max-width: 100%;
  flex: none;
}

/* Akkordeon */
.section_faq .faq_item {
  border: 0;
}
.section_faq .faq_question {
  margin: 0;
  font-size: inherit;
}
.section_faq .faq_toggle {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color--dark);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.section_faq .faq_toggle:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.25rem;
  border-radius: 0.25rem;
}
.section_faq .faq_question-text {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--font-size--h4, 1.5rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.section_faq .faq_icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background-color: var(--color--grey);
  color: var(--color--dark);
  transition: background-color var(--transition--fast, 0.2s);
}
@media (hover: hover) {
  .section_faq .faq_toggle:hover .faq_icon {
    background-color: var(--color--grey-dark);
  }
}
.section_faq .faq_item:not(.is-open) .accordion_panel-inner {
  visibility: hidden;
  transition: visibility 0s linear 220ms;
}
.section_faq .faq_answer {
  max-width: 38rem;
  padding-top: 0.75rem;
  color: #656d63;
  font-size: var(--font-size--body-1, 1rem);
  line-height: 1.7;
}
.section_faq .faq_answer > :last-child {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .section_faq .faq_top {
    gap: 2.5rem;
    margin-bottom: 4rem;
  }
  .section_faq .faq_title {
    font-size: 2.75rem;
  }
  .section_faq .faq_group {
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 4rem;
    margin-bottom: 4rem;
  }
  .section_faq .faq_group-title {
    flex: none;
  }
  .section_faq .faq_list {
    width: 100%;
    gap: 2.5rem;
  }
}
@media (max-width: 767px) {
  .section_faq .faq_top {
    gap: 2rem;
    margin-bottom: 3rem;
  }
  .section_faq .faq_head {
    gap: 1rem;
  }
  .section_faq .faq_eyebrow {
    font-size: 1rem;
  }
  .section_faq .faq_title {
    font-size: 2.25rem;
  }
  /* Filter: eine Zeile, horizontal wischbar */
  .section_faq .faq_filter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .section_faq .faq_filter::-webkit-scrollbar {
    display: none;
  }
  .section_faq .faq_filter-button {
    flex: none;
    min-width: 0;
    padding: 0.625rem 1.125rem;
  }
  .section_faq .faq_filter-button:first-child {
    min-width: 0;
  }
  .section_faq .faq_group {
    gap: 1.5rem;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
  }
  .section_faq .faq_group-title {
    font-size: 1.75rem;
  }
  .section_faq .faq_list {
    gap: 1.75rem;
  }
  .section_faq .faq_toggle {
    gap: 1rem;
  }
  .section_faq .faq_question-text {
    font-size: 1.125rem;
    line-height: 1.25;
  }
  .section_faq .faq_icon {
    width: 2.25rem;
    height: 2.25rem;
  }
  .section_faq .faq_answer {
    font-size: 0.9375rem;
  }
}
@media (max-width: 479px) {
  .section_faq .faq_title {
    font-size: 2rem;
  }
  .section_faq .faq_group-title {
    font-size: 1.5rem;
  }
}

/* 134. Rezepte Übersicht + Detail (Figma 10761-21750 / 10761-18603) */

/* ---------- Übersicht: optionaler Kopf ---------- */
.section_recipe-index .recipe-index_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 42.5rem;
  margin: 0 auto 3rem;
  text-align: center;
}
.section_recipe-index .recipe-index_eyebrow {
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #656d63;
}
.section_recipe-index .recipe-index_heading {
  margin: 0;
  font-size: var(--font-size--h1);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #232e20;
}

/* ---------- Übersicht: Filterleiste ---------- */
.section_recipe-index .recipe-index_tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1.875rem;
}
.section_recipe-index .recipe-index_filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.section_recipe-index .recipe-index_dd {
  position: relative;
}
.section_recipe-index .recipe-index_dd[hidden] {
  display: none;
}
.section_recipe-index .recipe-index_dd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 6.25rem;
  background-color: #f6f6f6;
  color: #232e20;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.section_recipe-index .recipe-index_dd.is-sort .recipe-index_dd-toggle {
  gap: 0.375rem;
}
.section_recipe-index .recipe-index_dd-value {
  color: #c5393c;
}
.section_recipe-index .recipe-index_dd-value:empty {
  display: none;
}
.section_recipe-index .recipe-index_dd.is-active:not(.is-sort) .recipe-index_dd-label::after {
  content: ":";
}
.section_recipe-index .recipe-index_dd-icon {
  display: inline-flex;
  width: 0.75rem;
  height: 0.75rem;
  font-size: 0.75rem;
  color: #c5393c;
  transition: transform 0.2s ease;
}
.section_recipe-index .recipe-index_dd.is-open .recipe-index_dd-icon {
  transform: rotate(180deg);
}
.section_recipe-index .recipe-index_dd-toggle:focus-visible,
.section_recipe-index .recipe-index_dd-option:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
.section_recipe-index .recipe-index_dd-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 13.75rem;
  max-height: 20rem;
  padding: 0.5rem;
  overflow-y: auto;
  border-radius: 0.75rem;
  background-color: #ffffff;
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.12);
}
.section_recipe-index .recipe-index_dd-panel[hidden] {
  display: none;
}
.section_recipe-index .recipe-index_dd.is-sort .recipe-index_dd-panel {
  left: auto;
  right: 0;
}
.section_recipe-index .recipe-index_dd-option {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background-color: transparent;
  color: #232e20;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
}
.section_recipe-index .recipe-index_dd-option[aria-pressed="true"] {
  background-color: #f6f6f6;
  color: #c5393c;
  font-weight: 600;
}

/* ---------- Übersicht: Raster + Karten ---------- */
.section_recipe-index .recipe-index_grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr));
  column-gap: 1rem;
  row-gap: 3.125rem;
}
.section_recipe-index .recipe-index_item[hidden] {
  display: none;
}
.section_recipe-index .recipe-index_card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 36.75rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
  background-color: #ffffff;
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.25s ease;
}
.section_recipe-index .recipe-index_media {
  position: relative;
  aspect-ratio: 400 / 273;
  overflow: hidden;
  border-radius: 0.375rem;
  background-color: #f6f6f6;
}
.section_recipe-index .recipe-index_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.section_recipe-index .recipe-index_badge {
  position: absolute;
  top: 0.625rem;
  left: 0;
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0.0625rem 0.976rem 0;
  background-color: #628859;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.66;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.section_recipe-index .recipe-index_body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  padding: 3.2rem 1.5rem 2.25rem;
  text-align: center;
}
.section_recipe-index .recipe-index_top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4375rem;
  width: 100%;
}
.section_recipe-index .recipe-index_rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.347rem;
}
.section_recipe-index .recipe-index_stars {
  position: relative;
  display: inline-block;
  width: 4.861rem;
  height: 0.972rem;
  color: #dcdfda;
}
.section_recipe-index .recipe-index_stars svg {
  display: block;
  width: 4.861rem;
  height: 0.972rem;
}
.section_recipe-index .recipe-index_stars-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rating, 0%);
  overflow: hidden;
  color: var(--color--stars);
}
.section_recipe-index .recipe-index_rating-value {
  font-size: 0.764rem;
  line-height: 1.66;
  letter-spacing: -0.01em;
  color: #232e20;
}
.section_recipe-index .recipe-index_copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}
.section_recipe-index .recipe-index_title {
  margin: 0;
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #232e20;
}
.section_recipe-index .recipe-index_link {
  color: inherit;
  text-decoration: none;
}
.section_recipe-index .recipe-index_link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 0.75rem;
}
.section_recipe-index .recipe-index_link:focus-visible {
  outline: none;
}
.section_recipe-index .recipe-index_link:focus-visible::after {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
.section_recipe-index .recipe-index_text {
  max-width: 17.875rem;
  font-size: var(--font-size--body-2, 0.875rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #656d63;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.section_recipe-index .recipe-index_text > * {
  margin: 0;
}
.section_recipe-index .recipe-index_meta {
  justify-content: center;
  gap: 0.375rem;
  margin-top: auto;
  color: #232e20;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.section_recipe-index .recipe-index_meta .meta-row_dot {
  opacity: 1;
}
.section_recipe-index .recipe-index_empty {
  margin: 0;
  padding: 3rem 0;
  font-size: 1rem;
  text-align: center;
  color: #656d63;
}
.section_recipe-index .recipe-index_empty[hidden],
.section_recipe-index [data-recipe-more][hidden] {
  display: none;
}
.section_recipe-index .recipe-index_more {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}
.section_recipe-index .recipe-index_more:has([data-recipe-more][hidden]) {
  margin-top: 0;
}

/* ---------- Detail: Kopf ---------- */
.section_recipe-hero .recipe-hero_back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #232e20;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.section_recipe-hero .recipe-hero_back-icon {
  display: inline-flex;
  font-size: 0.75rem;
}
.section_recipe-hero .recipe-hero_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
  max-width: 60.375rem;
  margin: 1.75rem auto 0;
}
.section_recipe-hero .recipe-hero_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  max-width: 42.125rem;
  text-align: center;
}
.section_recipe-hero .recipe-hero_title {
  margin: 0;
  font-size: var(--font-size--h2);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #100f0f;
}
.section_recipe-hero .recipe-hero_text {
  max-width: 36.5rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #656d63;
}
.section_recipe-hero .recipe-hero_text > * {
  margin: 0;
}
.section_recipe-hero .recipe-hero_tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 0.9rem;
}
.section_recipe-hero .recipe-hero_badge {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0.0625rem 0.976rem 0;
  background-color: #628859;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.66;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.section_recipe-hero .recipe-hero_meta {
  display: flex;
  grid-template-columns: none;
  width: auto;
  padding: 0;
  border: 0;
  gap: 0.375rem;
  color: #656d63;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}
.section_recipe-hero .recipe-hero_meta .meta-row_dot {
  width: 0.1875rem;
  height: 0.1875rem;
  opacity: 1;
}
.section_recipe-hero .recipe-hero_media {
  position: relative;
  width: 100%;
  aspect-ratio: 966 / 600;
  overflow: hidden;
  border-radius: 0.625rem;
  background-color: #f6f6f6;
}
.section_recipe-hero .recipe-hero_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_recipe-hero .recipe-hero_pin {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 1.9375rem;
  padding: 0 0.75rem 0 0.5rem;
  border-radius: 0.387rem;
  background-color: rgba(17, 17, 17, 0.88);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.section_recipe-hero .recipe-hero_pin-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
}
.section_recipe-hero .recipe-hero_sr,
.section_recipe-steps .recipe-share_status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.section_recipe-hero .recipe-hero_back:focus-visible,
.section_recipe-hero .recipe-hero_pin:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}

/* ---------- Detail: Zutaten ---------- */
.section_recipe-ingredients .recipe-ingredients_wrap {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: 60.375rem;
  margin: 0 auto;
}
.section_recipe-ingredients .recipe-ingredients_head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.section_recipe-ingredients .recipe-ingredients_bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.section_recipe-ingredients .recipe-ingredients_title,
.section_recipe-steps .recipe-steps_title,
.section_recipe-steps .recipe-steps_heading {
  margin: 0;
  font-size: var(--font-size--h3);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #232e20;
}
.section_recipe-ingredients .recipe-ingredients_servings {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.section_recipe-ingredients .recipe-ingredients_servings-label {
  font-size: 1rem;
  line-height: 1.7;
  color: #232e20;
}
.section_recipe-ingredients .recipe-ingredients_stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3.25rem;
  padding: 0 0.625rem;
  border-radius: 6.25rem;
  background-color: #f6f6f6;
}
.section_recipe-ingredients .recipe-ingredients_step-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: #232e20;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.section_recipe-ingredients .recipe-ingredients_step-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.section_recipe-ingredients .recipe-ingredients_step-btn:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
.section_recipe-ingredients .recipe-ingredients_count {
  min-width: 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-align: center;
  color: #232e20;
}
.section_recipe-ingredients .recipe-ingredients_intro,
.section_recipe-steps .recipe-steps_intro,
.section_recipe-steps .recipe-steps_text {
  font-size: 1rem;
  line-height: 1.7;
  color: #656d63;
}
.section_recipe-ingredients .recipe-ingredients_intro > *,
.section_recipe-steps .recipe-steps_intro > * {
  margin: 0;
}
.section_recipe-ingredients .recipe-ingredients_panel {
  padding: 3rem;
  overflow: hidden;
  border-radius: 0.625rem;
  background-image: linear-gradient(180.64deg, #fafafa 5.26%, #fffcfc 65.37%, #ebebeb 117.58%);
}
.section_recipe-ingredients .recipe-ingredients_columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem 3.75rem;
  align-items: start;
}
.section_recipe-ingredients .recipe-ingredients_col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.section_recipe-ingredients .recipe-ingredients_col-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #232e20;
}
.section_recipe-ingredients .recipe-ingredients_rows {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0.625rem;
  list-style: none;
}
.section_recipe-ingredients .recipe-ingredients_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 1rem 1.5rem;
}
.section_recipe-ingredients .recipe-ingredients_row:nth-child(odd) {
  background-color: rgba(188, 188, 188, 0.1);
}
.section_recipe-ingredients .recipe-ingredients_label {
  min-width: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: #656d63;
}
.section_recipe-ingredients .recipe-ingredients_product {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}
.section_recipe-ingredients .recipe-ingredients_product:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
.section_recipe-ingredients .recipe-ingredients_qty {
  flex: none;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
  color: #232e20;
}
.section_recipe-ingredients .recipe-ingredients_qty:empty {
  display: none;
}

/* ---------- Detail: Zubereitung ---------- */
.section_recipe-steps .recipe-steps_wrap {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: 60.375rem;
  margin: 0 auto;
}
.section_recipe-steps .recipe-steps_head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.section_recipe-steps .recipe-steps_list {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section_recipe-steps .recipe-steps_step {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin: 0;
}
.section_recipe-steps .recipe-steps_copy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.section_recipe-steps .recipe-steps_text > * {
  margin: 0;
}
.section_recipe-steps .recipe-steps_text > * + * {
  margin-top: 0.75rem;
}
.section_recipe-steps .recipe-steps_media {
  position: relative;
  width: 100%;
  aspect-ratio: 966 / 526;
  overflow: hidden;
  border-radius: 0.625rem;
  background-color: #d9d9d9;
}
.section_recipe-steps .recipe-steps_img,
.section_recipe-steps .recipe-steps_video,
.section_recipe-steps .recipe-steps_video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_recipe-steps .recipe-steps_media.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.section_recipe-steps .recipe-steps_media.is-video.is-playing::after {
  opacity: 0;
}
.section_recipe-steps .recipe-steps_play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.125rem;
  height: 4.125rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #c5393c;
  color: #ffffff;
  font-size: 1.125rem;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.section_recipe-steps .recipe-steps_play[hidden] {
  display: none;
}
.section_recipe-steps .recipe-steps_play:focus-visible {
  outline: 0.1875rem solid #ffffff;
  outline-offset: 0.1875rem;
}

/* Teilen-Leiste */
.section_recipe-steps .recipe-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
  padding: 1.75rem 2rem;
  overflow: hidden;
  border-radius: 0.625rem;
  background-color: #c5393c;
  color: #ffffff;
}
.section_recipe-steps .recipe-share_title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.section_recipe-steps .recipe-share_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
}
.section_recipe-steps .recipe-share_list {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section_recipe-steps .recipe-share_item {
  margin: 0;
}
.section_recipe-steps .recipe-share_link {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  color: #ffffff;
  border-radius: 50%;
  transition: opacity 0.2s ease;
}
.section_recipe-steps .recipe-share_svg {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
}
.section_recipe-steps .recipe-share_knock {
  fill: #c5393c;
}
.section_recipe-steps .recipe-share_copy {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 1.5rem 0.4375rem 1.25rem;
  border: 0;
  border-radius: 0;
  background-color: #ffffff;
  color: #232e20;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.section_recipe-steps .recipe-share_copy-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}
.section_recipe-steps .recipe-share_link:focus-visible,
.section_recipe-steps .recipe-share_copy:focus-visible {
  outline: 0.125rem solid #ffffff;
  outline-offset: 0.1875rem;
}

/* ---------- Hover (nur Zeigegeräte) ---------- */
@media (hover: hover) {
  .section_recipe-index .recipe-index_dd-toggle:hover {
    background-color: #ebebeb;
  }
  .section_recipe-index .recipe-index_dd-option:hover {
    background-color: #f6f6f6;
  }
  .section_recipe-index .recipe-index_card:hover {
    box-shadow: 0 0.5rem 3.8125rem rgba(0, 0, 0, 0.12);
  }
  .section_recipe-index .recipe-index_card:hover .recipe-index_img {
    transform: scale(1.03);
  }
  .section_recipe-hero .recipe-hero_back:hover {
    text-decoration: underline;
  }
  .section_recipe-hero .recipe-hero_pin:hover {
    background-color: #000000;
  }
  .section_recipe-ingredients .recipe-ingredients_step-btn:not(:disabled):hover {
    background-color: #ebebeb;
  }
  .section_recipe-ingredients .recipe-ingredients_product:hover {
    color: #232e20;
  }
  .section_recipe-steps .recipe-steps_play:hover {
    background-color: #a52d30;
    transform: translate(-50%, -50%) scale(1.05);
  }
  .section_recipe-steps .recipe-share_link:hover {
    opacity: 0.8;
  }
  .section_recipe-steps .recipe-share_copy:hover {
    background-color: #f6f6f6;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .section_recipe-index .recipe-index_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }
  .section_recipe-hero .recipe-hero_wrap {
    gap: 3rem;
  }
  .section_recipe-ingredients .recipe-ingredients_columns {
    gap: 2.5rem 2rem;
  }
  .section_recipe-ingredients .recipe-ingredients_panel {
    padding: 2rem;
  }
  .section_recipe-steps .recipe-steps_list {
    gap: 3.5rem;
  }
  .section_recipe-steps .recipe-steps_step {
    gap: 1.75rem;
  }
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  .section_recipe-index .recipe-index_head {
    gap: 1rem;
    margin-bottom: 2rem;
  }
  .section_recipe-index .recipe-index_eyebrow {
    font-size: 1rem;
  }
  .section_recipe-index .recipe-index_tools {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }
  .section_recipe-index .recipe-index_dd.is-sort {
    align-self: flex-start;
  }
  .section_recipe-index .recipe-index_dd-toggle {
    padding: 0.625rem 1.125rem;
  }
  .section_recipe-index .recipe-index_grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
  }
  .section_recipe-index .recipe-index_card {
    min-height: 0;
  }
  .section_recipe-index .recipe-index_body {
    gap: 1.5rem;
    padding: 2rem 1.25rem 1.75rem;
  }
  .section_recipe-index .recipe-index_top {
    gap: 1rem;
  }
  .section_recipe-hero .recipe-hero_wrap {
    gap: 2rem;
    margin-top: 1.25rem;
  }
  .section_recipe-hero .recipe-hero_head {
    gap: 1.25rem;
  }
  .section_recipe-hero .recipe-hero_text {
    font-size: 0.9375rem;
  }
  .section_recipe-hero .recipe-hero_media {
    aspect-ratio: 4 / 3;
  }
  .section_recipe-hero .recipe-hero_pin {
    right: 0.75rem;
    bottom: 0.75rem;
  }
  .section_recipe-ingredients .recipe-ingredients_wrap {
    gap: 2rem;
  }
  .section_recipe-ingredients .recipe-ingredients_stepper {
    height: 2.75rem;
  }
  .section_recipe-ingredients .recipe-ingredients_panel {
    padding: 1.5rem 1rem;
  }
  .section_recipe-ingredients .recipe-ingredients_columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .section_recipe-ingredients .recipe-ingredients_row {
    padding: 0.75rem 1rem;
  }
  .section_recipe-ingredients .recipe-ingredients_label {
    font-size: 0.9375rem;
  }
  .section_recipe-steps .recipe-steps_wrap {
    gap: 2rem;
  }
  .section_recipe-steps .recipe-steps_list {
    gap: 2.5rem;
  }
  .section_recipe-steps .recipe-steps_step {
    gap: 1.25rem;
  }
  .section_recipe-steps .recipe-steps_media {
    aspect-ratio: 4 / 3;
  }
  .section_recipe-steps .recipe-steps_play {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1rem;
  }
  .section_recipe-steps .recipe-share {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    margin-top: 1rem;
    padding: 1.5rem 1.25rem;
  }
  .section_recipe-steps .recipe-share_actions {
    gap: 1.25rem;
  }
}

@media (max-width: 479px) {
  .section_recipe-index .recipe-index_dd-panel {
    min-width: 12rem;
    max-width: calc(100vw - 2.5rem);
  }
  .section_recipe-ingredients .recipe-ingredients_bar {
    align-items: flex-start;
    flex-direction: column;
  }
  .section_recipe-ingredients .recipe-ingredients_row {
    padding: 0.75rem;
  }
}

@media print {
  .section_recipe-hero .recipe-hero_pin,
  .section_recipe-steps .recipe-share,
  .section_recipe-steps .recipe-steps_play {
    display: none !important;
  }
}

/* 135. Händler werden + Erfolg (Figma 11095-18233 / 11096-18586) */

/* --- Händler Formular: Kopf + graue Formular-Karte --- */
.section_dealer-form .dealer-form_layout {
  display: flex;
  flex-direction: column;
  gap: var(--space--80);
}

.section_dealer-form .dealer-form_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--24);
  text-align: center;
}

.section_dealer-form .dealer-form_eyebrow {
  color: #656d63;
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--subline);
}

.section_dealer-form .dealer-form_title {
  max-width: 42.5rem;
  margin: 0;
  color: var(--color--dark);
}

.section_dealer-form .dealer-form_intro {
  max-width: 37.25rem;
  color: #656d63;
  font-size: var(--font-size--body);
  line-height: 1.7;
}

.section_dealer-form .dealer-form_card {
  display: flex;
  flex-direction: column;
  gap: var(--space--28);
  width: 100%;
  max-width: 63.75rem;
  margin-left: auto;
  margin-right: auto;
  padding: var(--space--80) var(--space--100);
  border-radius: var(--radius--medium);
  background-color: var(--color--grey);
}

.section_dealer-form .dealer-form_card-title {
  margin: 0;
  color: var(--color--dark);
  font-size: var(--font-size--h3);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}

.section_dealer-form .dealer-form_form {
  display: flex;
  flex-direction: column;
}

.section_dealer-form .dealer-form_fields {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
}

.section_dealer-form .dealer-form_row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space--8) var(--space--12);
}

/* Feld mit Floating-Label: Label liegt als Platzhalter im Feld und
   rutscht bei Fokus/Inhalt als 12px-Label nach oben */
.section_dealer-form .dealer-form_field {
  position: relative;
  display: flex;
  flex-direction: column;
}

.section_dealer-form .dealer-form_input {
  display: block;
  width: 100%;
  height: 3.75rem;
  margin: 0;
  padding: 1.875rem 1.375rem 0.625rem;
  border: 0.0625rem solid transparent;
  border-radius: 0;
  background-color: var(--color--white);
  color: var(--color--dark);
  font-family: var(--font--family);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  transition: border-color var(--transition--fast), box-shadow var(--transition--fast);
}

.section_dealer-form .dealer-form_input.is-select {
  padding-right: 3.25rem;
  cursor: pointer;
}

.section_dealer-form .dealer-form_input.is-textarea {
  height: 12.5rem;
  min-height: 8rem;
  padding-top: 2.125rem;
  padding-bottom: 1.25rem;
  line-height: 1.5;
  resize: vertical;
}

.section_dealer-form .dealer-form_input:focus {
  outline: none;
}

.section_dealer-form .dealer-form_input:focus-visible {
  border-color: var(--color--neutral-dark);
  box-shadow: inset 0 0 0 0.0625rem var(--color--neutral-dark);
}

.section_dealer-form .dealer-form_label {
  position: absolute;
  top: 1.875rem;
  left: 1.375rem;
  right: 1.375rem;
  transform: translateY(-50%);
  color: #656d63;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: top var(--transition--fast), font-size var(--transition--fast), transform var(--transition--fast);
}

.section_dealer-form .dealer-form_field.is-select .dealer-form_label {
  right: 3.25rem;
}

.section_dealer-form .dealer-form_field.is-textarea .dealer-form_label {
  top: 1.5rem;
  transform: none;
}

.section_dealer-form .dealer-form_input:focus + .dealer-form_label,
.section_dealer-form .dealer-form_input:not(:placeholder-shown) + .dealer-form_label,
.section_dealer-form .dealer-form_field.is-select:not(:has(option[value=""]:checked)) .dealer-form_label,
.section_dealer-form .dealer-form_field.is-textarea .dealer-form_input:focus + .dealer-form_label,
.section_dealer-form .dealer-form_field.is-textarea .dealer-form_input:not(:placeholder-shown) + .dealer-form_label {
  top: 0.625rem;
  transform: none;
  font-size: 0.75rem;
}

.section_dealer-form .dealer-form_caret {
  position: absolute;
  top: 1.875rem;
  right: 1.375rem;
  display: flex;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: var(--color--dark);
  font-size: 1rem;
  pointer-events: none;
}

.section_dealer-form .dealer-form_caret .icon-svg {
  width: 1rem;
  height: 1rem;
}

/* Fehlerzustand */
.section_dealer-form .dealer-form_input[aria-invalid="true"] {
  border-color: var(--color--error-dark);
}

.section_dealer-form .dealer-form_input[aria-invalid="true"] + .dealer-form_label {
  color: var(--color--error-dark);
}

.section_dealer-form .dealer-form_error {
  display: block;
  margin-top: 0.375rem;
  color: var(--color--error-dark);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.section_dealer-form .dealer-form_error:empty {
  display: none;
}

.section_dealer-form .dealer-form_alert,
.section_dealer-form .dealer-form_success {
  margin-bottom: var(--space--16);
  padding: var(--space--12) var(--space--16);
  font-size: 0.875rem;
  line-height: 1.5;
}

.section_dealer-form .dealer-form_alert {
  background-color: var(--color--error);
  color: var(--color--error-dark);
}

.section_dealer-form .dealer-form_alert ul {
  margin: 0;
  padding-left: 1.125rem;
}

.section_dealer-form .dealer-form_success {
  background-color: var(--color--success);
  color: var(--color--success-dark);
}

.section_dealer-form .dealer-form_success p {
  margin: 0;
}

/* Checkboxen */
.section_dealer-form .dealer-form_checks {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 0.875rem;
}

.section_dealer-form .dealer-form_check {
  display: flex;
  align-items: flex-start;
  gap: var(--space--8);
}

.section_dealer-form .dealer-form_check-input {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0.125rem 0 0;
  border: 0.0625rem solid transparent;
  border-radius: 0;
  background-color: var(--color--white);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 0.75rem;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--transition--fast), border-color var(--transition--fast);
}

.section_dealer-form .dealer-form_check-input:checked {
  border-color: var(--color--red);
  background-color: var(--color--red);
  background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.5 12L13 4.5' stroke='white' stroke-width='2'/%3E%3C/svg%3E);
}

.section_dealer-form .dealer-form_check-input:focus {
  outline: none;
}

.section_dealer-form .dealer-form_check-input:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}

.section_dealer-form .dealer-form_check-input[aria-invalid="true"] {
  border-color: var(--color--error-dark);
}

.section_dealer-form .dealer-form_check-label {
  color: var(--color--dark);
  font-size: var(--font-size--body-3);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
  cursor: pointer;
}

.section_dealer-form .dealer-form_check-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.section_dealer-form .dealer-form_check-link:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}

.section_dealer-form .dealer-form_check-wrap .dealer-form_error {
  margin-left: 1.5rem;
}

.section_dealer-form .dealer-form_actions {
  display: flex;
  margin-top: var(--space--40);
}

.section_dealer-form .dealer-form_submit {
  width: 16.875rem;
  padding: var(--space--16) 3.5rem;
}

.section_dealer-form .dealer-form_submit:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}

.section_dealer-form .dealer-form_submit[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

@media (hover: hover) {
  .section_dealer-form .dealer-form_check-link:hover {
    color: var(--color--red);
  }
  .section_dealer-form .dealer-form_input:hover:not(:focus) {
    border-color: var(--border-color--strong);
  }
}

@media (max-width: 991px) {
  .section_dealer-form .dealer-form_card {
    padding: var(--space--64) var(--space--48);
  }
}

@media (max-width: 767px) {
  .section_dealer-form .dealer-form_layout {
    gap: var(--space--40);
  }
  .section_dealer-form .dealer-form_head {
    gap: var(--space--16);
  }
  .section_dealer-form .dealer-form_eyebrow {
    font-size: 1.0625rem;
  }
  .section_dealer-form .dealer-form_card {
    gap: var(--space--24);
    padding: var(--space--40) var(--space--20);
  }
  .section_dealer-form .dealer-form_row {
    grid-template-columns: minmax(0, 1fr);
  }
  .section_dealer-form .dealer-form_input.is-textarea {
    height: 10rem;
  }
  .section_dealer-form .dealer-form_actions {
    margin-top: var(--space--32);
  }
  .section_dealer-form .dealer-form_submit {
    width: 100%;
  }
}

/* --- Händler Erfolg: Vollbild-Hero mit Glas-Chips --- */
.section_dealer-success .dealer-success_inner {
  position: relative;
  display: flex;
  min-height: var(--hero-min-height, 56rem);
  overflow: hidden;
  color: var(--color--white);
}

.section_dealer-success .dealer-success_bg {
  position: absolute;
  inset: 0;
  background-color: var(--color--dark);
  background-image: linear-gradient(150deg, var(--color--green-dark) 0%, var(--color--dark) 65%);
}

.section_dealer-success .dealer-success_img {
  object-position: 50% 100%;
}

.section_dealer-success .dealer-success_overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(3, 32, 9, 0.5) 0%, rgba(3, 32, 9, 0) 16rem);
  background-color: rgba(3, 32, 9, 0.4);
}

.section_dealer-success .dealer-success_content-wrap {
  position: relative;
  width: 100%;
  padding-top: 14.75rem;
  padding-bottom: var(--space--80);
}

.section_dealer-success .dealer-success_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--28);
  max-width: 39rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section_dealer-success .dealer-success_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--16);
}

.section_dealer-success .dealer-success_eyebrow {
  color: var(--color--white);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--subline);
}

.section_dealer-success .dealer-success_title {
  margin: 0;
  color: var(--color--white);
}

.section_dealer-success .dealer-success_text {
  max-width: 29.125rem;
  color: var(--color--white);
  font-size: var(--font-size--body);
  line-height: 1.7;
}

.section_dealer-success .dealer-success_more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--20);
}

.section_dealer-success .dealer-success_hint {
  margin: 0;
  color: var(--color--white);
  font-size: var(--font-size--link);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
}

.section_dealer-success .dealer-success_links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4375rem;
}

.section_dealer-success .dealer-success_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6875rem 1.125rem 0.5625rem;
  border-radius: var(--radius--pill);
  background-color: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.08);
  color: var(--color--white);
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--transition--fast);
}

.section_dealer-success .dealer-success_link:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.125rem;
}

@media (hover: hover) {
  .section_dealer-success .dealer-success_link:hover {
    background-color: rgba(255, 255, 255, 0.38);
    color: var(--color--white);
  }
}

@media (max-width: 991px) {
  .section_dealer-success .dealer-success_inner {
    min-height: min(var(--hero-min-height, 56rem), 50rem);
  }
  .section_dealer-success .dealer-success_content-wrap {
    padding-top: 12rem;
  }
}

@media (max-width: 767px) {
  .section_dealer-success .dealer-success_inner {
    min-height: 40rem;
    min-height: max(40rem, 100svh);
  }
  .section_dealer-success .dealer-success_content-wrap {
    padding-top: 10rem;
    padding-bottom: var(--space--48);
  }
  .section_dealer-success .dealer-success_content {
    gap: var(--space--24);
  }
  .section_dealer-success .dealer-success_head {
    gap: var(--space--12);
  }
  .section_dealer-success .dealer-success_eyebrow {
    font-size: 1.0625rem;
  }
  .section_dealer-success .dealer-success_link {
    font-size: 0.9375rem;
    padding: 0.625rem 1rem 0.5rem;
  }
}

@media (max-width: 479px) {
  .section_dealer-success .dealer-success_hint {
    max-width: 16rem;
  }
}

/* 136. Händlersuche (Figma 10919-22670) */
.section_dealer-locator .dealer-locator_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
}

.section_dealer-locator .dealer-locator_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--24, 1.5rem);
  width: 100%;
  text-align: center;
}

.section_dealer-locator .dealer-locator_eyebrow {
  color: var(--section-eyebrow, #656d63);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.section_dealer-locator .dealer-locator_title {
  max-width: 42.5rem;
  margin: 0;
  color: var(--color--dark, #232e20);
  font-size: 3.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Rahmen der Händlersuche: 1280 × 978 (Suchleiste + Liste + Karte), Radius 10 */
.section_dealer-locator .dealer-locator_frame {
  width: 100%;
  height: var(--dealer-locator-h, 61rem);
  border-radius: 0.625rem;
  overflow: hidden;
  background-color: var(--section-bg, #fff);
}

.section_dealer-locator .dealer-locator_iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 991px) {
  .section_dealer-locator .dealer-locator_container {
    gap: 3.75rem;
  }

  .section_dealer-locator .dealer-locator_title {
    font-size: 2.75rem;
  }
}

@media (max-width: 767px) {
  .section_dealer-locator .dealer-locator_container {
    gap: 2.5rem;
  }

  .section_dealer-locator .dealer-locator_head {
    gap: var(--space--12, 0.75rem);
  }

  .section_dealer-locator .dealer-locator_eyebrow {
    font-size: 1.0625rem;
  }

  .section_dealer-locator .dealer-locator_title {
    font-size: 2.125rem;
  }

  .section_dealer-locator .dealer-locator_frame {
    height: var(--dealer-locator-h-m, 50rem);
  }
}

@media (max-width: 479px) {
  .section_dealer-locator .dealer-locator_title {
    font-size: 1.875rem;
  }
}

/* 137. Newsletter (Figma 10850-10081) */
/* -------------------------------------------------------------
   Newsletter CTA: Formular-Wrapper, Erfolgs- und Fehlerzustand,
   optionaler Text und Darstellung "Seiten-Hero" (Newsletter-Seite).
   Das <form> ist nur noch ein Wrapper; die Glas-Zeile mit Feld und
   Button ist weiterhin .newsletter-cta_form.
   ------------------------------------------------------------- */
.section_newsletter-cta .newsletter-cta_form-el {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space--8);
  width: 100%;
  margin: 0;
  /* Shopify springt nach dem Absenden auf #<form-id> — Platz fuer die fixe Nav */
  scroll-margin-top: calc(var(--nav-height, 6.625rem) + 2rem);
}

/* Shopify haengt hCaptcha & Co. direkt in das <form>: aus dem Fluss nehmen */
.section_newsletter-cta .newsletter-cta_form-el > :not(.li-guard) {
  position: absolute !important;
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  margin: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* --- Optionaler Text unter der Ueberschrift --- */
.section_newsletter-cta .newsletter-cta_text-wrap {
  margin-top: var(--space--8);
}
.section_newsletter-cta .newsletter-cta_text {
  max-width: 31.375rem;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--font-size--body);
  line-height: 1.7;
  color: inherit;
}
.section_newsletter-cta .newsletter-cta_text > :last-child {
  margin-bottom: 0;
}

/* --- Fehlerzustand --- */
.section_newsletter-cta .newsletter-cta_alert {
  padding: var(--space--8) var(--space--16);
  background-color: var(--color--red);
  color: var(--color--white);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: left;
}
.section_newsletter-cta .newsletter-cta_alert ul {
  margin: 0;
  padding-left: 1.25em;
}
.section_newsletter-cta .newsletter-cta_input[aria-invalid="true"] {
  outline: 0.125rem solid var(--color--red);
  outline-offset: -0.125rem;
}

/* --- Erfolgszustand (ersetzt Feld + Button) --- */
.section_newsletter-cta .newsletter-cta_success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--8);
  padding: var(--space--24) var(--space--32);
  background-color: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(0.3125rem);
  backdrop-filter: blur(0.3125rem);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.08);
  color: inherit;
  text-align: center;
  scroll-margin-top: calc(var(--nav-height, 6.625rem) + 2rem);
}
.section_newsletter-cta .newsletter-cta_success:focus {
  outline: none;
}
.section_newsletter-cta .newsletter-cta_success:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: 0.25rem;
}
.section_newsletter-cta .newsletter-cta_success-eyebrow {
  font-size: var(--font-size--h6);
  line-height: 1.2;
  letter-spacing: 0;
  color: inherit;
}
.section_newsletter-cta .newsletter-cta_success-title {
  margin: 0;
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: var(--tracking--h4);
}
.section_newsletter-cta .newsletter-cta_success-text {
  max-width: 28rem;
  font-size: var(--font-size--body);
  line-height: 1.7;
}
.section_newsletter-cta .newsletter-cta_success-text > :last-child {
  margin-bottom: 0;
}

/* --- Darstellung "Seiten-Hero" (Figma 10850-10081, 1440 x 900) --- */
.section_newsletter-cta .is-layout-hero .newsletter-cta_overlay {
  background-color: rgba(3, 32, 9, 0.4);
}
/* dunkler Verlauf oben, damit die transparente Nav lesbar bleibt */
.section_newsletter-cta .is-layout-hero .newsletter-cta_bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16rem;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.section_newsletter-cta .is-layout-hero .newsletter-cta_content-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: var(--hero-min-height, 56rem);
  padding-top: calc(var(--nav-height, 7.9375rem) + 8rem);
  padding-bottom: 6rem;
}
.section_newsletter-cta .is-layout-hero .newsletter-cta_content-wrap > .container-small {
  width: 100%;
}
.section_newsletter-cta .is-layout-hero .newsletter-cta_content {
  gap: 0;
  max-width: 39rem;
  margin-left: auto;
  margin-right: auto;
}
.section_newsletter-cta .is-layout-hero .newsletter-cta_content > .text-style-eyebrow {
  margin-bottom: var(--space--16);
  font-size: var(--font-size--h5);
  letter-spacing: 0.025rem;
}
.section_newsletter-cta .is-layout-hero .newsletter-cta_heading {
  font-size: var(--font-size--h1);
  line-height: 1;
  letter-spacing: -0.03em;
}
.section_newsletter-cta .is-layout-hero .newsletter-cta_text-wrap {
  margin-top: 1.75rem;
}
.section_newsletter-cta .is-layout-hero .newsletter-cta_form-block {
  max-width: 39.625rem;
  margin-top: 1.75rem;
}

@media (max-width: 991px) {
  .section_newsletter-cta .is-layout-hero .newsletter-cta_content-wrap {
    min-height: min(var(--hero-min-height, 56rem), 48rem);
    padding-top: calc(var(--nav-height, 7.9375rem) + 6rem);
    padding-bottom: 5rem;
  }
}

@media (max-width: 767px) {
  .section_newsletter-cta .newsletter-cta_success {
    padding: var(--space--20) var(--space--16);
  }
  .section_newsletter-cta .is-layout-hero .newsletter-cta_content-wrap {
    min-height: 38rem;
    padding-top: calc(var(--nav-height, 6.625rem) + 3.5rem);
    padding-bottom: 3.5rem;
  }
  .section_newsletter-cta .is-layout-hero .newsletter-cta_content > .text-style-eyebrow {
    margin-bottom: var(--space--12);
    font-size: var(--font-size--h6);
  }
  .section_newsletter-cta .is-layout-hero .newsletter-cta_text-wrap,
  .section_newsletter-cta .is-layout-hero .newsletter-cta_form-block {
    margin-top: var(--space--24);
  }
}

@media (max-width: 479px) {
  .section_newsletter-cta .is-layout-hero .newsletter-cta_content-wrap {
    min-height: 34rem;
  }
}

/* 138. Suche: Seite, Modal, Vorschläge (Figma 10761-23550 / 10761-6050 / 10761-6584) */

/* ---------- Such-Modal (liegt per Script am Ende von body) ---------- */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  color: var(--color--dark);
}
.search-modal[hidden] {
  display: none;
}
.search-modal_backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(35, 46, 32, 0.4);
  -webkit-backdrop-filter: blur(0.375rem);
  backdrop-filter: blur(0.375rem);
  opacity: 0;
  transition: opacity var(--transition--fast);
}
.search-modal.is-open .search-modal_backdrop {
  opacity: 1;
}
.search-modal_panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  background-color: var(--color--grey);
  box-shadow: var(--shadow--lg);
  transform: translateY(-0.75rem);
  opacity: 0;
  transition: transform var(--transition--fast), opacity var(--transition--fast);
}
.search-modal.is-open .search-modal_panel {
  transform: none;
  opacity: 1;
}
.search-modal_bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(0, 43.75rem) 1fr;
  align-items: center;
  gap: var(--space--24);
  min-height: 5.5rem;
  padding: var(--space--16) var(--space--80);
  background-color: var(--color--white);
  flex: none;
}
.search-modal_logo {
  position: absolute;
  top: 0;
  left: var(--space--80);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.75rem;
  height: 7.125rem;
  background-color: var(--color--brand-red);
  overflow: hidden;
}
.search-modal_logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.search-modal_form {
  grid-column: 2;
  width: 100%;
}
.search-modal_field {
  display: flex;
  align-items: center;
  gap: var(--space--12);
  height: 3.5rem;
  padding: 0 var(--space--20) 0 var(--space--16);
  border: 0.0625rem solid transparent;
  border-radius: var(--radius--pill);
  background-color: var(--color--grey);
  transition: border-color var(--transition--fast), background-color var(--transition--fast);
}
.search-modal_field:focus-within {
  border-color: var(--color--red);
}
.search-modal_field-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color--dark);
}
.search-modal_field:focus-within .search-modal_field-icon {
  color: var(--color--red);
}
.search-modal_input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color--dark);
  caret-color: var(--color--red);
  -webkit-appearance: none;
  appearance: none;
}
.search-modal_input:focus {
  outline: none;
}
.search-modal_input::placeholder {
  color: var(--color--dark);
  opacity: 0.7;
}
.search-modal_input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.search-modal_close {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space--4);
  min-height: 2.75rem;
  padding: 0 var(--space--4);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  color: var(--color--dark);
}
.search-modal_close-icon {
  width: 1rem;
  height: 1rem;
  color: var(--color--red);
}
.search-modal_close:focus-visible,
.search-modal_logo:focus-visible {
  outline: 0.125rem solid var(--color--dark);
  outline-offset: 0.125rem;
}
@media (hover: hover) {
  .search-modal_close:hover {
    color: var(--color--red);
  }
}
.search-modal_body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 3.75rem var(--space--80) var(--space--80);
}
.search-modal_results {
  width: 100%;
  max-width: 43.75rem;
  margin: 0 auto;
}
.search-modal_results[aria-busy="true"] {
  opacity: 0.6;
  transition: opacity var(--transition--fast);
}

/* ---------- Vorschlaege (Section predictive_search) ---------- */
.search-suggest_groups,
.search-suggest.is-initial {
  display: flex;
  flex-direction: column;
  gap: var(--space--40);
}
.search-suggest_group {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
}
.search-suggest_group[hidden],
.search-suggest_group:not(:has(li)) {
  display: none;
}
.search-suggest_heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  color: var(--color--dark);
}
.search-suggest_pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--12) var(--space--16);
  margin: 0;
  padding: 0;
}
.search-suggest_pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.125rem;
  padding: var(--space--8) 1.375rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--white);
  color: var(--color--dark);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  transition: color var(--transition--fast), box-shadow var(--transition--fast);
}
.search-suggest_pill mark {
  background: none;
  color: inherit;
  font-weight: 400;
}
.search-suggest_products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.375rem;
  margin: 0;
  padding: 0;
}
.search-suggest_product {
  display: flex;
  min-width: 0;
}
.search-suggest_product > * {
  width: 100%;
}
.search-suggest_product .product-item_image-wrapper {
  aspect-ratio: 1 / 0.96;
}
.search-suggest_product .product-item_story {
  display: none;
}
.search-suggest_categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.375rem;
  margin: 0;
  padding: 0;
}
.search-suggest_category {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
  color: var(--color--dark);
}
.search-suggest_category-media {
  display: block;
  height: 8.125rem;
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  overflow: hidden;
}
.search-suggest_category-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition--base);
}
.search-suggest_category-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
}
.search-suggest_tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space--8);
  margin: 0;
  padding: 0;
}
.search-suggest_tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 168 / 180;
  padding: var(--space--16);
  border-radius: var(--radius--small);
  background-color: var(--color--white);
  box-shadow: var(--shadow--sm);
  overflow: hidden;
  transition: box-shadow var(--transition--fast);
}
.search-suggest_tile-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.search-suggest_tile-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
}
.search-suggest_empty {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
}
.search-suggest_empty-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
}
.search-suggest_empty-text {
  margin: 0;
  color: var(--color--dark);
  opacity: 0.8;
}
.search-suggest_all {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  margin-top: 3.75rem;
  padding: var(--space--16) var(--space--24);
  background-color: var(--color--white);
  color: var(--color--dark);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  text-align: center;
  transition: background-color var(--transition--fast), color var(--transition--fast);
}
.search-suggest_pill:focus-visible,
.search-suggest_category:focus-visible,
.search-suggest_tile:focus-visible,
.search-suggest_all:focus-visible {
  outline: 0.125rem solid var(--color--dark);
  outline-offset: 0.125rem;
}
@media (hover: hover) {
  .search-suggest_pill:hover {
    color: var(--color--red);
    box-shadow: var(--shadow--sm);
  }
  .search-suggest_category:hover .search-suggest_category-img {
    transform: scale(1.04);
  }
  .search-suggest_category:hover .search-suggest_category-title {
    color: var(--color--red);
  }
  .search-suggest_tile:hover {
    box-shadow: var(--shadow--md);
  }
  .search-suggest_all:hover {
    background-color: var(--color--dark);
    color: var(--color--white);
  }
}

/* ---------- Suchergebnis-Seite (Section Suche) ---------- */
.section_search .search_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--24);
  max-width: none;
  margin-bottom: 0;
  text-align: center;
}
.section_search .search_title {
  margin: 0;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.03em;
}
.section_search .search_form {
  display: flex;
  align-items: center;
  gap: var(--space--8);
  width: 100%;
  max-width: 43.75rem;
}
.section_search .search_field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space--12);
  min-width: 0;
  height: 3.5rem;
  padding: 0 var(--space--20) 0 var(--space--16);
  border: 0.0625rem solid transparent;
  border-radius: var(--radius--pill);
  background-color: var(--color--grey);
  transition: border-color var(--transition--fast);
}
.section_search .search_field:focus-within {
  border-color: var(--color--red);
}
.section_search .search_field-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}
.section_search .search_input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--color--dark);
  caret-color: var(--color--red);
  -webkit-appearance: none;
  appearance: none;
}
.section_search .search_input:focus {
  outline: none;
}
.section_search .search_submit {
  flex: none;
  min-height: 3.5rem;
  padding-left: var(--space--32);
  padding-right: var(--space--32);
  border-radius: var(--radius--pill);
}
.section_search .search_tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
  margin-top: 3.75rem;
  margin-bottom: var(--space--40);
}
.section_search .search_tabs {
  display: flex;
  gap: var(--space--4);
  padding: var(--space--4);
  border-radius: var(--radius--pill);
  background-color: var(--color--grey);
  overflow-x: auto;
  scrollbar-width: none;
}
.section_search .search_tabs::-webkit-scrollbar {
  display: none;
}
.section_search .search_tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 9.375rem;
  padding: var(--space--12) var(--space--24);
  border-radius: var(--radius--pill);
  color: var(--color--dark);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  white-space: nowrap;
  transition: background-color var(--transition--fast), color var(--transition--fast);
}
.section_search .search_tab.is-active {
  background-color: var(--color--red);
  color: var(--color--white);
}
.section_search .search_tab:focus-visible {
  outline: 0.125rem solid var(--color--dark);
  outline-offset: 0.125rem;
}
.section_search .search_sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: none;
  height: 3.125rem;
  padding: 0 var(--space--24);
  border-radius: var(--radius--pill);
  background-color: var(--color--grey);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  cursor: pointer;
}
.section_search .search_sort-label {
  color: var(--color--dark);
}
.section_search .search_sort-value {
  color: var(--color--red);
}
.section_search .search_sort-value:empty {
  display: none;
}
.section_search .search_sort-form {
  display: inline-flex;
}
/* Select liegt unsichtbar ueber dem Chip, der Wert wird per Script gespiegelt */
.section_search .search_sort-select {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 1rem;
  cursor: pointer;
}
.section_search .search_sort:not(:has(.search_sort-value:not(:empty))) .search_sort-select {
  position: static;
  width: auto;
  height: auto;
  opacity: 1;
  font: inherit;
  color: var(--color--red);
  background: transparent;
}
.section_search .search_sort:has(.search_sort-select:focus-visible) {
  outline: 0.125rem solid var(--color--dark);
  outline-offset: 0.125rem;
}
.section_search .search_sort-icon {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--color--red);
}
.section_search .search_grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 4), minmax(0, 1fr));
  gap: var(--space--64) var(--space--32);
}
.section_search .search_item {
  display: flex;
  min-width: 0;
}
.section_search .search_item > .li-guard > *,
.section_search .search_item > * {
  width: 100%;
}
.section_search .search_card {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  box-shadow: var(--shadow--sm);
  overflow: hidden;
  color: var(--color--dark);
  transition: box-shadow var(--transition--base);
}
.section_search .search_card-media {
  display: block;
  aspect-ratio: 3 / 2;
  background-color: var(--color--grey);
  overflow: hidden;
}
.section_search .search_card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_search .search_card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
  padding: var(--space--24);
}
.section_search .search_card-type {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking--link);
  color: #656d63;
}
.section_search .search_card-title {
  font-size: 1.125rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
}
.section_search .search_card-text {
  font-size: 0.875rem;
  line-height: 1.6;
}
.section_search .search_card:focus-visible {
  outline: 0.125rem solid var(--color--dark);
  outline-offset: 0.125rem;
}
.section_search .search_pagination {
  align-items: center;
  gap: var(--space--8);
}
.section_search .pagination_count.is-current {
  background-color: var(--color--red);
  color: var(--color--white);
}
.section_search .pagination_icon {
  width: 1rem;
  height: 1rem;
}
.section_search .search_empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--16);
  padding: var(--space--64) 0 var(--space--24);
  text-align: center;
  color: var(--color--dark);
}
.section_search .search_empty-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
}
.section_search .search_empty-text {
  margin: 0;
  max-width: 36rem;
}
@media (hover: hover) {
  .section_search .search_tab:not(.is-active):hover {
    color: var(--color--red);
  }
  .section_search .search_card:hover {
    box-shadow: var(--shadow--md);
  }
  .section_search .search_card:hover .search_card-title {
    color: var(--color--red);
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .search-modal_bar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--space--16) var(--space--32);
  }
  .search-modal_logo {
    display: none;
  }
  .search-modal_form {
    grid-column: 1;
  }
  .search-modal_close {
    grid-column: 2;
  }
  .search-modal_body {
    padding: var(--space--40) var(--space--32) var(--space--64);
  }
  .search-modal_results {
    max-width: none;
  }
  .section_search .search_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space--40) var(--space--24);
  }
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  .search-modal_panel {
    height: 100%;
  }
  .search-modal_bar {
    min-height: 4.5rem;
    gap: var(--space--12);
    padding: var(--space--12) var(--space--16);
  }
  .search-modal_field {
    height: 3rem;
  }
  .search-modal_close-label {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    margin: -0.0625rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .search-modal_close {
    justify-content: center;
    width: 2.75rem;
  }
  .search-modal_close-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  .search-modal_body {
    padding: var(--space--32) var(--space--16) var(--space--48);
  }
  .search-suggest_groups,
  .search-suggest.is-initial {
    gap: var(--space--32);
  }
  .search-suggest_pills {
    gap: var(--space--8);
  }
  .search-suggest_products,
  .search-suggest_categories {
    display: flex;
    gap: var(--space--8);
    margin: 0 calc(-1 * var(--space--16));
    padding: 0 var(--space--16) var(--space--4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--space--16);
    scrollbar-width: none;
  }
  .search-suggest_products::-webkit-scrollbar,
  .search-suggest_categories::-webkit-scrollbar {
    display: none;
  }
  .search-suggest_product,
  .search-suggest_category-item {
    flex: 0 0 70%;
    scroll-snap-align: start;
  }
  .search-suggest_category-item {
    flex-basis: 60%;
  }
  .search-suggest_category-media {
    height: 7.5rem;
  }
  .search-suggest_all {
    margin-top: var(--space--40);
  }
  .section_search .search_form {
    flex-direction: column;
    align-items: stretch;
  }
  .section_search .search_field {
    height: 3rem;
  }
  .section_search .search_submit {
    min-height: 3rem;
  }
  .section_search .search_tools {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--space--32);
    margin-bottom: var(--space--24);
  }
  .section_search .search_tab {
    flex: 1 0 auto;
    min-width: 0;
    padding: var(--space--12) var(--space--16);
  }
  .section_search .search_sort {
    justify-content: center;
    height: 3rem;
  }
  .section_search .search_grid {
    grid-template-columns: repeat(var(--grid-columns-mobile, 2), minmax(0, 1fr));
    gap: var(--space--24) var(--space--12);
  }
}

@media (max-width: 479px) {
  .search-suggest_tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section_search .search_grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-modal_backdrop,
  .search-modal_panel,
  .search-suggest_category-img {
    transition: none;
  }
}

/* 139. Lexikon Übersicht + Detail (Figma 10761-22496 / 10761-23272) */

/* ---------- Übersicht: Hilfs-Wrapper ---------- */
.section_lexicon-index .lexicon-index_slot {
  display: contents;
}
.section_lexicon-index .lexicon-index_sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.section_lexicon-index [hidden] {
  display: none !important;
}

/* ---------- Übersicht: Such- und Buchstabenleiste ---------- */
.section_lexicon-index .lexicon-index_tools {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  background-image: linear-gradient(179.5deg, #f7f7f7 1.95%, #ffffff 60.99%, #f7f7f7 115.66%);
}
.section_lexicon-index .lexicon-index_tools .container-large {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.section_lexicon-index .lexicon-index_search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.5rem;
  margin: 0;
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  background-color: #ffffff;
  box-shadow: 0 0.25rem 1.90625rem rgba(0, 0, 0, 0.06);
}
.section_lexicon-index .lexicon-index_search-icon {
  display: flex;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: #232e20;
}
.section_lexicon-index .lexicon-index_search-icon .icon-svg {
  width: 100%;
  height: 100%;
}
.section_lexicon-index .lexicon-index_search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.7;
  color: #232e20;
  -webkit-appearance: none;
  appearance: none;
}
.section_lexicon-index .lexicon-index_search-input::placeholder {
  color: #656d63;
  opacity: 1;
}
.section_lexicon-index .lexicon-index_search-input:focus {
  outline: none;
}
.section_lexicon-index .lexicon-index_search:focus-within {
  outline: 0.125rem solid #232e20;
  outline-offset: 0.125rem;
}
.section_lexicon-index .lexicon-index_search-button {
  flex: none;
  height: 3rem;
  padding: 0 3.5rem;
  border-radius: 0;
}

.section_lexicon-index .lexicon-index_letters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.section_lexicon-index .lexicon-index_letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #232e20;
  text-decoration: none;
  background-color: transparent;
  transition: background-color var(--transition--fast), color var(--transition--fast);
}
.section_lexicon-index .lexicon-index_letter.is-active {
  background-color: var(--color--red);
  color: #ffffff;
}
.section_lexicon-index .lexicon-index_letter.is-disabled {
  opacity: 0.2;
  cursor: default;
}
.section_lexicon-index a.lexicon-index_letter:focus-visible {
  outline: 0.125rem solid var(--color--red);
  outline-offset: 0.125rem;
}
@media (hover: hover) {
  .section_lexicon-index a.lexicon-index_letter:not(.is-active):hover {
    color: var(--color--red);
  }
}
.section_lexicon-index .lexicon-index_reset {
  margin-left: 0.5rem;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  color: #232e20;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  cursor: pointer;
}
@media (hover: hover) {
  .section_lexicon-index .lexicon-index_reset:hover {
    color: var(--color--red);
  }
}

/* ---------- Übersicht: Buchstabengruppen ---------- */
.section_lexicon-index .lexicon-index_groups {
  display: flex;
  flex-direction: column;
  gap: 8.75rem;
}
.section_lexicon-index .lexicon-index_group {
  display: flex;
  align-items: flex-start;
  gap: 5.625rem;
  scroll-margin-top: 8rem;
}
.section_lexicon-index .lexicon-index_group-letter {
  flex: none;
  width: 5.875rem;
  margin: 0;
  font-family: var(--font--script);
  font-size: 4.375rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.66;
  letter-spacing: 0.002em;
  color: #656d63;
}
.section_lexicon-index .lexicon-index_entries {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 3.125rem;
  padding-top: 1.25rem;
}
.section_lexicon-index .lexicon-index_entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.section_lexicon-index .lexicon-index_title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #100f0f;
}
.section_lexicon-index .lexicon-index_title-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition--fast);
}
@media (hover: hover) {
  .section_lexicon-index .lexicon-index_title-link:hover {
    color: var(--color--red);
  }
  .section_lexicon-index .lexicon-index_more:hover {
    color: var(--color--red);
  }
}
.section_lexicon-index .lexicon-index_text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: 1rem;
  line-height: 1.7;
  color: #656d63;
}
.section_lexicon-index .lexicon-index_more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  color: #232e20;
  text-decoration: none;
  transition: color var(--transition--fast);
}
.section_lexicon-index .lexicon-index_more-icon {
  display: flex;
  width: 0.625rem;
  height: 0.625rem;
}
.section_lexicon-index .lexicon-index_more-icon .icon-svg {
  width: 100%;
  height: 100%;
}
.section_lexicon-index .lexicon-index_empty {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: #656d63;
}

/* ---------- Detail: Zurück-Link + Karte ---------- */
.section_lexicon-detail .lexicon-detail_layout {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.section_lexicon-detail .lexicon-detail_back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  color: #232e20;
  text-decoration: none;
  transition: color var(--transition--fast);
}
@media (hover: hover) {
  .section_lexicon-detail .lexicon-detail_back-link:hover {
    color: var(--color--red);
  }
}
.section_lexicon-detail .lexicon-detail_back-icon {
  display: flex;
  width: 0.625rem;
  height: 0.625rem;
}
.section_lexicon-detail .lexicon-detail_back-icon .icon-svg {
  width: 100%;
  height: 100%;
}
.section_lexicon-detail .lexicon-detail_card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 4rem 5rem;
  overflow: hidden;
  border-radius: 0.625rem;
  background-image: linear-gradient(180.6deg, #fafafa 5.26%, #fffcfc 65.37%, #ebebeb 117.58%);
}
.section_lexicon-detail .lexicon-detail_title {
  flex: 0 1 29.0625rem;
  min-width: 0;
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #232e20;
  overflow-wrap: break-word;
  hyphens: auto;
}
.section_lexicon-detail .lexicon-detail_content {
  display: flex;
  flex: 0 1 33.375rem;
  min-width: 0;
  flex-direction: column;
  gap: 3rem;
}
.section_lexicon-detail .lexicon-detail_text {
  font-size: 1rem;
  line-height: 1.7;
  color: #656d63;
}
.section_lexicon-detail .lexicon-detail_text p {
  margin: 0;
}
.section_lexicon-detail .lexicon-detail_text > * + * {
  margin-top: 3rem;
}
.section_lexicon-detail .lexicon-detail_text h2,
.section_lexicon-detail .lexicon-detail_text h3,
.section_lexicon-detail .lexicon-detail_text h4 {
  color: #232e20;
}
.section_lexicon-detail .lexicon-detail_media {
  position: relative;
  width: 100%;
  aspect-ratio: 477 / 363;
  overflow: hidden;
  border-radius: 0.625rem;
}
.section_lexicon-detail .lexicon-detail_image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Detail: Passende Produkte ---------- */
.section_lexicon-detail .lexicon-detail_products {
  padding-top: 6.25rem;
  padding-bottom: 6.25rem;
  background-color: #ffffff;
}
.section_lexicon-detail .lexicon-detail_products-layout {
  display: flex;
  align-items: stretch;
  gap: 6.25rem;
}
.section_lexicon-detail .lexicon-detail_products-aside {
  display: flex;
  flex: 0 0 24.5rem;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-width: 0;
}
.section_lexicon-detail .lexicon-detail_products-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}
.section_lexicon-detail .lexicon-detail_products-copy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.section_lexicon-detail .lexicon-detail_eyebrow {
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  color: #656d63;
}
.section_lexicon-detail .lexicon-detail_products-heading {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #232e20;
}
.section_lexicon-detail .lexicon-detail_products-text {
  max-width: 22.5625rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #656d63;
}
.section_lexicon-detail .lexicon-detail_products-button {
  min-width: 16.875rem;
  border-radius: 0;
}
.section_lexicon-detail .lexicon-detail_nav {
  width: 100%;
  max-width: 22rem;
  margin-top: 0;
}
.section_lexicon-detail .lexicon-detail_products-slider {
  flex: 1 1 0;
  min-width: 0;
}
.section_lexicon-detail .lexicon-detail_swiper {
  overflow: visible;
}
.section_lexicon-detail .swiper-slide.lexicon-detail_slide {
  width: 19.25rem;
  height: auto;
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .section_lexicon-index .lexicon-index_groups {
    gap: 5rem;
  }
  .section_lexicon-index .lexicon-index_group {
    gap: 2.5rem;
  }
  .section_lexicon-index .lexicon-index_letters {
    gap: 0.5rem;
  }
  .section_lexicon-detail .lexicon-detail_card {
    padding: 3rem 2.5rem;
  }
  .section_lexicon-detail .lexicon-detail_products {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
  .section_lexicon-detail .lexicon-detail_products-layout {
    flex-direction: column;
    gap: 2.5rem;
  }
  .section_lexicon-detail .lexicon-detail_products-aside {
    flex: none;
    display: contents;
  }
  .section_lexicon-detail .lexicon-detail_products-head {
    order: 1;
  }
  .section_lexicon-detail .lexicon-detail_products-slider {
    order: 2;
    width: 100%;
  }
  .section_lexicon-detail .lexicon-detail_nav {
    order: 3;
    max-width: none;
  }
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  .section_lexicon-index .lexicon-index_tools {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .section_lexicon-index .lexicon-index_tools .container-large {
    gap: 1.25rem;
  }
  .section_lexicon-index .lexicon-index_search {
    padding-left: 0.75rem;
    gap: 0.5rem;
  }
  .section_lexicon-index .lexicon-index_search-button {
    padding: 0 1.25rem;
  }
  .section_lexicon-index .lexicon-index_letters {
    gap: 0.25rem;
  }
  .section_lexicon-index .lexicon-index_letter {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 1.125rem;
  }
  .section_lexicon-index .lexicon-index_groups {
    gap: 3.5rem;
  }
  .section_lexicon-index .lexicon-index_group {
    flex-direction: column;
    gap: 0.5rem;
  }
  .section_lexicon-index .lexicon-index_group-letter {
    width: auto;
    font-size: 3.5rem;
    line-height: 1.2;
  }
  .section_lexicon-index .lexicon-index_entries {
    gap: 2.25rem;
    padding-top: 0;
  }
  .section_lexicon-index .lexicon-index_title {
    font-size: 1.5rem;
  }
  .section_lexicon-detail .lexicon-detail_layout {
    gap: 1.25rem;
  }
  .section_lexicon-detail .lexicon-detail_card {
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1.25rem;
  }
  .section_lexicon-detail .lexicon-detail_title,
  .section_lexicon-detail .lexicon-detail_content {
    flex: none;
    width: 100%;
  }
  .section_lexicon-detail .lexicon-detail_title {
    font-size: 1.875rem;
  }
  .section_lexicon-detail .lexicon-detail_content {
    gap: 2rem;
  }
  .section_lexicon-detail .lexicon-detail_text > * + * {
    margin-top: 1.5rem;
  }
  .section_lexicon-detail .lexicon-detail_products {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .section_lexicon-detail .lexicon-detail_products-heading {
    font-size: 1.875rem;
  }
  .section_lexicon-detail .swiper-slide.lexicon-detail_slide {
    width: 16.5rem;
  }
}

@media (max-width: 479px) {
  .section_lexicon-index .lexicon-index_search-button {
    padding: 0 1rem;
  }
  .section_lexicon-detail .lexicon-detail_products-button {
    width: 100%;
    min-width: 0;
  }
}

/* 140. Kontakt + Erfolg (Figma 10886-17891 / 10886-16895) */

/* --- Kontaktformular: Intro links, graue Formular-Karte rechts --- */
.section_contact-form .kontakt_layout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space--48);
}

.section_contact-form .kontakt_intro {
  display: flex;
  flex-direction: column;
  flex: 0 1 28.5rem;
  gap: 2.25rem;
  min-width: 0;
}

.section_contact-form .kontakt_head {
  display: flex;
  flex-direction: column;
  gap: var(--space--28);
}

.section_contact-form .kontakt_heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.125rem;
}

.section_contact-form .kontakt_eyebrow {
  color: #656d63;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--subline);
}

.section_contact-form .kontakt_title {
  max-width: 26.3125rem;
  margin: 0;
  color: var(--color--dark);
}

.section_contact-form .kontakt_benefits {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: 24.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section_contact-form .kontakt_benefit {
  display: flex;
  align-items: center;
  gap: var(--space--12);
  margin: 0;
}

.section_contact-form .kontakt_benefit-icon {
  display: flex;
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--color--red);
}

.section_contact-form .kontakt_benefit-svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

.section_contact-form .kontakt_benefit-text {
  min-width: 0;
  color: var(--color--dark);
  font-size: var(--font-size--link);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
}

/* Ansprechpartner:in */
.section_contact-form .kontakt_person {
  display: flex;
  align-items: center;
  gap: var(--space--24);
  width: 100%;
  max-width: 22.6875rem;
  padding: 0.375rem;
  border-radius: var(--radius--medium);
  background-color: var(--color--grey);
  overflow: hidden;
}

.section_contact-form .kontakt_person-media {
  flex: none;
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 0.25rem;
  background-color: #cce2f1;
  overflow: hidden;
}

.section_contact-form .kontakt_person-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section_contact-form .kontakt_person-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.section_contact-form .kontakt_person-name {
  color: var(--color--dark);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--subline);
}

.section_contact-form .kontakt_person-role {
  color: #656d63;
  font-size: var(--font-size--body);
  line-height: 1.7;
}

/* Formular-Karte */
.section_contact-form .kontakt_card {
  display: flex;
  flex-direction: column;
  flex: 0 1 43.75rem;
  gap: var(--space--28);
  min-width: 0;
  padding: 3.75rem var(--space--80);
  border-radius: var(--radius--medium);
  background-color: var(--color--grey);
}

.section_contact-form .kontakt_card-title {
  margin: 0;
  color: var(--color--dark);
  font-size: var(--font-size--h3);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}

.section_contact-form .kontakt-form_form {
  display: flex;
  flex-direction: column;
}

.section_contact-form .kontakt-form_fields {
  display: flex;
  flex-direction: column;
  gap: var(--space--12);
}

.section_contact-form .kontakt-form_row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space--12);
}

/* Feld mit Floating-Label (52px hoch): Label liegt als Platzhalter im Feld
   und rutscht bei Fokus/Inhalt als 12px-Label nach oben */
.section_contact-form .kontakt-form_field {
  position: relative;
  display: flex;
  flex-direction: column;
}

.section_contact-form .kontakt-form_input {
  display: block;
  width: 100%;
  height: 3.25rem;
  margin: 0;
  padding: 1.625rem 1.375rem 0.375rem;
  border: 0.0625rem solid transparent;
  border-radius: 0;
  background-color: var(--color--white);
  color: var(--color--dark);
  font-family: var(--font--family);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  transition: border-color var(--transition--fast), box-shadow var(--transition--fast);
}

.section_contact-form .kontakt-form_input.is-select {
  padding-right: 3.25rem;
  cursor: pointer;
}

.section_contact-form .kontakt-form_input.is-textarea {
  height: 9.375rem;
  min-height: 7rem;
  padding-top: 2.125rem;
  padding-bottom: 1rem;
  line-height: 1.5;
  resize: vertical;
}

.section_contact-form .kontakt-form_input:focus {
  outline: none;
}

.section_contact-form .kontakt-form_input:focus-visible {
  border-color: var(--color--neutral-dark);
  box-shadow: inset 0 0 0 0.0625rem var(--color--neutral-dark);
}

.section_contact-form .kontakt-form_label {
  position: absolute;
  top: 1.625rem;
  left: 1.375rem;
  right: 1.375rem;
  transform: translateY(-50%);
  color: #656d63;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: top var(--transition--fast), font-size var(--transition--fast), transform var(--transition--fast);
}

.section_contact-form .kontakt-form_field.is-select .kontakt-form_label {
  right: 3.25rem;
}

.section_contact-form .kontakt-form_field.is-textarea .kontakt-form_label {
  top: 1.0625rem;
  transform: none;
}

.section_contact-form .kontakt-form_input:focus + .kontakt-form_label,
.section_contact-form .kontakt-form_input:not(:placeholder-shown) + .kontakt-form_label,
.section_contact-form .kontakt-form_field.is-select:not(:has(option[value=""]:checked)) .kontakt-form_label,
.section_contact-form .kontakt-form_field.is-textarea .kontakt-form_input:focus + .kontakt-form_label,
.section_contact-form .kontakt-form_field.is-textarea .kontakt-form_input:not(:placeholder-shown) + .kontakt-form_label {
  top: 0.375rem;
  transform: none;
  font-size: 0.75rem;
}

.section_contact-form .kontakt-form_caret {
  position: absolute;
  top: 1.625rem;
  right: 1.375rem;
  display: flex;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: var(--color--red);
  font-size: 1rem;
  pointer-events: none;
}

.section_contact-form .kontakt-form_caret .icon-svg {
  width: 1rem;
  height: 1rem;
}

/* Fehlerzustand */
.section_contact-form .kontakt-form_input[aria-invalid="true"] {
  border-color: var(--color--error-dark);
}

.section_contact-form .kontakt-form_input[aria-invalid="true"] + .kontakt-form_label {
  color: var(--color--error-dark);
}

.section_contact-form .kontakt-form_error {
  display: block;
  margin-top: 0.375rem;
  color: var(--color--error-dark);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.section_contact-form .kontakt-form_error:empty {
  display: none;
}

.section_contact-form .kontakt-form_alert,
.section_contact-form .kontakt-form_success {
  margin-bottom: var(--space--16);
  padding: var(--space--12) var(--space--16);
  font-size: 0.875rem;
  line-height: 1.5;
}

.section_contact-form .kontakt-form_alert {
  background-color: var(--color--error);
  color: var(--color--error-dark);
}

.section_contact-form .kontakt-form_alert ul {
  margin: 0;
  padding-left: 1.125rem;
}

.section_contact-form .kontakt-form_success {
  background-color: var(--color--success);
  color: var(--color--success-dark);
}

.section_contact-form .kontakt-form_success p {
  margin: 0;
}

/* Checkboxen */
.section_contact-form .kontakt-form_checks {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 0.875rem;
}

.section_contact-form .kontakt-form_check {
  display: flex;
  align-items: flex-start;
  gap: var(--space--8);
}

.section_contact-form .kontakt-form_check-input {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0.125rem 0 0;
  border: 0.0625rem solid transparent;
  border-radius: 0;
  background-color: var(--color--white);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 0.75rem;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--transition--fast), border-color var(--transition--fast);
}

.section_contact-form .kontakt-form_check-input:checked {
  border-color: var(--color--red);
  background-color: var(--color--red);
  background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.5 12L13 4.5' stroke='white' stroke-width='2'/%3E%3C/svg%3E);
}

.section_contact-form .kontakt-form_check-input:focus {
  outline: none;
}

.section_contact-form .kontakt-form_check-input:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}

.section_contact-form .kontakt-form_check-input[aria-invalid="true"] {
  border-color: var(--color--error-dark);
}

.section_contact-form .kontakt-form_check-label {
  color: var(--color--dark);
  font-size: var(--font-size--body-3);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
  cursor: pointer;
}

.section_contact-form .kontakt-form_check-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.section_contact-form .kontakt-form_check-link:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}

.section_contact-form .kontakt-form_check-wrap .kontakt-form_error {
  margin-left: 1.5rem;
}

.section_contact-form .kontakt-form_actions {
  display: flex;
  margin-top: var(--space--40);
}

.section_contact-form .kontakt-form_submit {
  width: 16.875rem;
  padding: var(--space--16) 3.5rem;
}

.section_contact-form .kontakt-form_submit:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}

.section_contact-form .kontakt-form_submit[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

@media (hover: hover) {
  .section_contact-form .kontakt-form_check-link:hover {
    color: var(--color--red);
  }
  .section_contact-form .kontakt-form_input:hover:not(:focus) {
    border-color: var(--border-color--strong);
  }
}

@media (max-width: 991px) {
  .section_contact-form .kontakt_layout {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space--48);
  }
  .section_contact-form .kontakt_intro {
    flex: none;
    gap: var(--space--32);
  }
  .section_contact-form .kontakt_card {
    flex: none;
    padding: var(--space--48) var(--space--48);
  }
}

@media (max-width: 767px) {
  .section_contact-form .kontakt_layout {
    gap: var(--space--40);
  }
  .section_contact-form .kontakt_intro {
    gap: var(--space--28);
  }
  .section_contact-form .kontakt_head {
    gap: var(--space--24);
  }
  .section_contact-form .kontakt_heading {
    gap: var(--space--12);
  }
  .section_contact-form .kontakt_eyebrow {
    font-size: 1.0625rem;
  }
  .section_contact-form .kontakt_person {
    gap: var(--space--16);
  }
  .section_contact-form .kontakt_person-media {
    width: 5rem;
    height: 5rem;
  }
  .section_contact-form .kontakt_person-name {
    font-size: 1.0625rem;
  }
  .section_contact-form .kontakt_card {
    gap: var(--space--24);
    padding: var(--space--40) var(--space--20);
  }
  .section_contact-form .kontakt_card-title {
    font-size: var(--font-size--h4);
  }
  .section_contact-form .kontakt-form_row {
    grid-template-columns: minmax(0, 1fr);
  }
  .section_contact-form .kontakt-form_actions {
    margin-top: var(--space--32);
  }
  .section_contact-form .kontakt-form_submit {
    width: 100%;
  }
}

/* --- Kontakt Erfolg: nutzt das Hero-Muster von "Haendler Erfolg"
   (.section_dealer-success, Abschnitt 135) 1:1 – hier nur Abweichungen --- */
.section_contact-success .dealer-success_title {
  text-wrap: balance;
}

/* 141. Blog + Newsroom (Figma 10761-21433 / 10761-18184 / 10886-17462 / 10886-16222) */

/* ---------- Gemeinsam: Screenreader-Text, Dropdown-Pillen, News-Karte ---------- */
.section_newsroom-index .newsroom-index_sr,
.section_newsroom-press .newsroom-press_sr,
.section_article-content .article-page_sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.section_newsroom-index [hidden],
.section_article-content [hidden] {
  display: none !important;
}

.section_blog-index .lf-dropdown,
.section_newsroom-index .lf-dropdown {
  position: relative;
  flex: none;
}
.section_blog-index .lf-dropdown_toggle,
.section_newsroom-index .lf-dropdown_toggle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.625rem;
  padding: 0.75rem 1.5rem;
  border-radius: 6.25rem;
  background-color: var(--color--grey, #f6f6f6);
  color: var(--color--dark, #232e20);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.section_blog-index .lf-dropdown_toggle::-webkit-details-marker,
.section_newsroom-index .lf-dropdown_toggle::-webkit-details-marker {
  display: none;
}
.section_blog-index .lf-dropdown_toggle:focus-visible,
.section_newsroom-index .lf-dropdown_toggle:focus-visible {
  outline: 0.125rem solid var(--color--focus, #0f5636);
  outline-offset: 0.125rem;
}
.section_blog-index .lf-dropdown_value,
.section_newsroom-index .lf-dropdown_value {
  color: var(--color--red, #c5393c);
}
.section_blog-index .lf-dropdown_caret,
.section_newsroom-index .lf-dropdown_caret {
  display: flex;
  width: 0.75rem;
  height: 0.75rem;
  color: var(--color--red, #c5393c);
  transition: transform 0.2s ease;
}
.section_blog-index .lf-dropdown_caret .icon-svg,
.section_newsroom-index .lf-dropdown_caret .icon-svg {
  width: 100%;
  height: 100%;
}
.section_blog-index .lf-dropdown[open] .lf-dropdown_caret,
.section_newsroom-index .lf-dropdown[open] .lf-dropdown_caret {
  transform: rotate(180deg);
}
.section_blog-index .lf-dropdown_panel,
.section_newsroom-index .lf-dropdown_panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  max-height: 20rem;
  overflow-y: auto;
  padding: 0.5rem;
  border-radius: 0.625rem;
  background-color: #ffffff;
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.12);
}
.section_blog-index .blog-index_sort .lf-dropdown_panel,
.section_newsroom-index .newsroom-index_sort .lf-dropdown_panel {
  left: auto;
  right: 0;
}
.section_blog-index .lf-dropdown_option,
.section_newsroom-index .lf-dropdown_option {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color--dark, #232e20);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.section_blog-index .lf-dropdown_option[aria-pressed="true"],
.section_blog-index .lf-dropdown_option[aria-current="page"],
.section_newsroom-index .lf-dropdown_option[aria-pressed="true"],
.section_newsroom-index .lf-dropdown_option[aria-current="page"] {
  color: var(--color--red, #c5393c);
}
.section_newsroom-index .newsroom-index_year-list {
  display: flex;
  flex-direction: column;
}
@media (hover: hover) {
  .section_blog-index .lf-dropdown_option:hover,
  .section_newsroom-index .lf-dropdown_option:hover {
    background-color: var(--color--grey, #f6f6f6);
  }
}

/* News-Karte (Figma 10886:17555): rotes Badge, Datum über dem Titel */
.section_newsroom-index .blog-card.is-news .blog-card_badge,
.section_related-articles .blog-card.is-news .blog-card_badge {
  background-color: var(--color--red, #c5393c);
}
.section_newsroom-index .blog-card_body.is-news,
.section_related-articles .blog-card_body.is-news {
  gap: 1rem;
}

/* ---------- Blog-Übersicht (Figma 10761-21433) ---------- */
.section_blog-index .blog-index_tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.875rem;
}
.section_blog-index .blog-index_tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.25rem;
  border-radius: 6.25rem;
  background-color: var(--color--grey, #f6f6f6);
  overflow-x: auto;
  scrollbar-width: none;
}
.section_blog-index .blog-index_tabs::-webkit-scrollbar {
  display: none;
}
.section_blog-index .blog-index_tab {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 9.375rem;
  padding: 0.75rem 1.5rem;
  border-radius: 6.25rem;
  color: var(--color--dark, #232e20);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition--fast, 0.2s), color var(--transition--fast, 0.2s);
}
.section_blog-index .blog-index_tab.is-active {
  background-color: var(--color--red, #c5393c);
  color: #ffffff;
}
.section_blog-index .blog-index_sort .lf-dropdown_toggle {
  min-height: 3.125rem;
}
.section_blog-index .blog-index_grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr));
  column-gap: 1rem;
  row-gap: 3.125rem;
}
.section_blog-index .blog-index_empty {
  padding: 3rem 0;
  color: #656d63;
  text-align: center;
}
.section_blog-index .blog-pagination_nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.section_blog-index .pagination_count {
  color: var(--color--dark, #232e20);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.section_blog-index .pagination_count.is-current {
  background-color: var(--color--red, #c5393c);
  color: #ffffff;
}
.section_blog-index .blog-pagination_arrow {
  width: 2.25rem;
}
.section_blog-index .blog-pagination_arrow .icon-svg {
  width: 1rem;
  height: 1rem;
}
@media (hover: hover) {
  .section_blog-index .blog-index_tab:not(.is-active):hover {
    color: var(--color--red, #c5393c);
  }
}

/* ---------- Newsroom-Übersicht (Figma 10886-17462) ---------- */
.section_newsroom-index {
  overflow-x: clip;
}
.section_newsroom-index .newsroom-index_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
.section_newsroom-index .newsroom-index_eyebrow {
  color: var(--section-eyebrow, #656d63);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.section_newsroom-index .newsroom-index_title {
  max-width: 42.5rem;
  margin: 0;
  color: var(--color--dark, #232e20);
  font-size: 3.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.03em;
}
.section_newsroom-index .newsroom-index_topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4375rem;
  margin-top: 2.25rem;
}
.section_newsroom-index .newsroom-index_topic {
  display: inline-flex;
  align-items: center;
  padding: 0.9375rem 1.5625rem 0.8125rem;
  border-radius: 6.25rem;
  background-color: var(--color--grey, #f6f6f6);
  color: var(--color--dark, #232e20);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color var(--transition--fast, 0.2s), color var(--transition--fast, 0.2s);
}
.section_newsroom-index .newsroom-index_topic.is-active {
  background-color: var(--color--red, #c5393c);
  color: #ffffff;
}

/* Hervorgehobene News: Karte 1035 × 540, Bild rechts mit 8px Innenabstand */
.section_newsroom-index .newsroom-index_featured {
  margin-top: 3.75rem;
}
.section_newsroom-index .newsroom-index_swiper {
  overflow: visible;
}
.section_newsroom-index .swiper-slide.newsroom-index_slide {
  width: 64.6875rem;
  max-width: 100%;
  height: auto;
}
.section_newsroom-index .newsroom-feature {
  display: flex;
  height: 100%;
  min-height: 33.75rem;
  overflow: hidden;
  border-radius: 0.625rem;
  background-color: #ffffff;
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
}
.section_newsroom-index .newsroom-feature_body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2rem;
  min-width: 0;
  padding: 3rem 4.5625rem 3.75rem 3.75rem;
}
.section_newsroom-index .newsroom-feature_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.section_newsroom-index .newsroom-feature_badge {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0.0625rem 0.975rem 0;
  background-color: var(--color--red, #c5393c);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.66;
  letter-spacing: 0.02em;
}
.section_newsroom-index .newsroom-feature_date {
  color: rgba(35, 46, 32, 0.7);
  font-size: 1rem;
  line-height: 1.7;
}
.section_newsroom-index .newsroom-feature_body > .newsroom-feature_content {
  margin-top: auto;
}
.section_newsroom-index .newsroom-feature_content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 23rem;
}
.section_newsroom-index .newsroom-feature_title {
  margin: 0;
  color: var(--color--dark, #232e20);
  font-size: 2rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.section_newsroom-index .newsroom-feature_link {
  color: inherit;
  text-decoration: none;
}
.section_newsroom-index .newsroom-feature_text {
  margin: 0;
  color: #656d63;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.section_newsroom-index .newsroom-feature_button {
  align-self: flex-start;
  margin-top: -0.25rem;
  padding: 1rem 3.5rem;
}
.section_newsroom-index .newsroom-feature_media {
  position: relative;
  flex: none;
  width: 32.875rem;
  margin: 0.5rem;
  overflow: hidden;
  border-radius: 0.375rem;
  background-color: var(--color--grey, #f6f6f6);
}
.section_newsroom-index .newsroom-feature_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.section_newsroom-index .newsroom-index_featured .slider-nav {
  margin-top: 3rem;
}

/* Suche + Filter */
.section_newsroom-index .newsroom-index_tools {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 3.75rem;
}
.section_newsroom-index .newsroom-index_search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  margin: 0;
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  background-color: #ffffff;
  box-shadow: 0 0.25rem 1.90625rem rgba(0, 0, 0, 0.06);
}
.section_newsroom-index .newsroom-index_search-icon {
  display: flex;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color--dark, #232e20);
}
.section_newsroom-index .newsroom-index_search-icon .icon-svg {
  width: 100%;
  height: 100%;
}
.section_newsroom-index .newsroom-index_search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color--dark, #232e20);
  font: inherit;
  font-size: 1rem;
  line-height: 1.7;
  outline: none;
}
.section_newsroom-index .newsroom-index_search-input::placeholder {
  color: #656d63;
  opacity: 1;
}
.section_newsroom-index .newsroom-index_search:focus-within {
  outline: 0.125rem solid var(--color--focus, #0f5636);
  outline-offset: 0.125rem;
}
.section_newsroom-index .newsroom-index_search-button {
  flex: none;
  height: 3rem;
  padding: 0 3.5rem;
}
.section_newsroom-index .newsroom-index_filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.section_newsroom-index .newsroom-index_filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Raster + Mehr laden */
.section_newsroom-index .newsroom-index_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1rem;
  row-gap: 3.75rem;
  margin-top: 1.75rem;
}
.section_newsroom-index .newsroom-index_empty {
  padding: 3rem 0;
  color: #656d63;
  text-align: center;
}
.section_newsroom-index .newsroom-index_more {
  display: flex;
  justify-content: center;
  margin-top: 3.75rem;
}
.section_newsroom-index .newsroom-index_more-button {
  min-width: 16.875rem;
}
.section_newsroom-index .newsroom-index_more-button[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}
@media (hover: hover) {
  .section_newsroom-index .newsroom-index_topic:not(.is-active):hover {
    color: var(--color--red, #c5393c);
  }
  .section_newsroom-index .newsroom-feature:hover .newsroom-feature_img {
    transform: scale(1.04);
  }
  .section_newsroom-index .newsroom-feature_link:hover {
    color: var(--color--red, #c5393c);
  }
}

/* ---------- Newsroom: Presse-Slider (Figma 10886:17666) ---------- */
.section_newsroom-press {
  overflow-x: clip;
}
.section_newsroom-press .section-head {
  margin-bottom: 2.5rem;
}
.section_newsroom-press .newsroom-press_swiper {
  overflow: visible;
}
.section_newsroom-press .swiper-slide.newsroom-press_slide {
  width: 26rem;
  max-width: 85vw;
  height: auto;
}
.section_newsroom-press .newsroom-press_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.8125rem;
  height: 100%;
  padding: 2.5rem 2rem;
  border-radius: 0.75rem;
  background-color: #ffffff;
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
  text-align: center;
}
.section_newsroom-press .newsroom-press_source {
  padding: 0.1875rem 0.875rem 0.125rem;
  background-color: var(--color--grey, #f6f6f6);
  color: var(--color--dark, #232e20);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.section_newsroom-press .newsroom-press_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}
.section_newsroom-press .newsroom-press_title {
  margin: 0;
  color: var(--color--dark, #232e20);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.section_newsroom-press .newsroom-press_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  color: var(--color--dark, #232e20);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.section_newsroom-press .newsroom-press_dot {
  width: 0.125rem;
  height: 0.125rem;
  border-radius: 50%;
  background-color: currentColor;
}
.section_newsroom-press .newsroom-press_text {
  max-width: 17.875rem;
  margin: 0;
  color: #656d63;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.section_newsroom-press .newsroom-press_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5625rem;
  width: 100%;
  margin-top: auto;
  padding: 1rem 1.5rem;
  border: 0.0625rem solid rgba(101, 109, 99, 0.3);
  color: var(--color--dark, #232e20);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: border-color var(--transition--fast, 0.2s), color var(--transition--fast, 0.2s);
}
.section_newsroom-press .newsroom-press_icon {
  display: flex;
  width: 1.125rem;
  height: 1.125rem;
}
.section_newsroom-press .newsroom-press_icon .icon-svg {
  width: 100%;
  height: 100%;
}
@media (hover: hover) {
  .section_newsroom-press .newsroom-press_button:hover {
    border-color: var(--color--red, #c5393c);
    color: var(--color--red, #c5393c);
  }
}

/* ---------- Newsroom: Pressekit & Kontakt (Figma 10886:17741) ---------- */
.section_newsroom-kit .newsroom-kit_head {
  margin-bottom: 2.5rem;
}
.section_newsroom-kit .newsroom-kit_head .heading-style-h2 {
  max-width: 39.75rem;
}
.section_newsroom-kit .newsroom-kit_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.section_newsroom-kit .newsroom-kit_card {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  padding: 3rem 3.75rem;
  border-radius: 0.625rem;
  background-color: #ffffff;
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
}
.section_newsroom-kit .newsroom-kit_visual {
  display: flex;
  align-items: center;
  min-height: 6.875rem;
}
.section_newsroom-kit .newsroom-kit_circle {
  position: relative;
  display: block;
  flex: none;
  width: 6.25rem;
  height: 6.25rem;
  overflow: hidden;
  border: 0.375rem solid #ffffff;
  border-radius: 50%;
  background-color: var(--color--grey, #f6f6f6);
}
.section_newsroom-kit .newsroom-kit_stack .newsroom-kit_circle + .newsroom-kit_circle {
  margin-left: -1.3125rem;
}
.section_newsroom-kit .newsroom-kit_stack .newsroom-kit_circle:nth-child(1) {
  z-index: 3;
}
.section_newsroom-kit .newsroom-kit_stack .newsroom-kit_circle:nth-child(2) {
  z-index: 2;
}
.section_newsroom-kit .newsroom-kit_stack .newsroom-kit_circle:nth-child(3) {
  z-index: 1;
}
.section_newsroom-kit .newsroom-kit_circle.is-brand {
  background-color: var(--color--brand-red, #d91920);
}
.section_newsroom-kit .newsroom-kit_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_newsroom-kit .newsroom-kit_circle.is-brand .newsroom-kit_img {
  object-fit: contain;
}
.section_newsroom-kit .newsroom-kit_contact {
  gap: 0.875rem;
}
.section_newsroom-kit .newsroom-kit_circle.is-person {
  border: 0;
}
.section_newsroom-kit .newsroom-kit_bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.875rem;
  border-radius: 0.25rem;
  background-color: var(--color--red, #c5393c);
  color: #ffffff;
}
.section_newsroom-kit .newsroom-kit_bubble::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.5rem;
  width: 0;
  height: 0;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  border-right: 0.5625rem solid var(--color--red, #c5393c);
  transform: translateY(-50%);
}
.section_newsroom-kit .newsroom-kit_name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
}
.section_newsroom-kit .newsroom-kit_role {
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.section_newsroom-kit .newsroom-kit_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 29.4375rem;
}
.section_newsroom-kit .newsroom-kit_title {
  margin: 0;
  color: var(--color--dark, #232e20);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.section_newsroom-kit .newsroom-kit_text {
  margin: 0;
  color: #656d63;
  font-size: 1rem;
  line-height: 1.7;
}
.section_newsroom-kit .newsroom-kit_button {
  min-width: 16.875rem;
  padding: 1rem 1.5rem;
}

/* ---------- Beitrag (Blog + News, Figma 10761-18184 / 10886-16222) ---------- */
.section_article-content .article-page_back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  color: var(--color--dark, #232e20);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.section_article-content .article-page_back-icon {
  display: flex;
  width: 0.625rem;
  height: 0.625rem;
}
.section_article-content .article-page_back-icon .icon-svg {
  width: 100%;
  height: 100%;
}
.section_article-content .article-page_layout {
  display: grid;
  grid-template-columns: minmax(0, 47.4375rem) minmax(0, 26.3125rem);
  justify-content: space-between;
  align-items: start;
  column-gap: 4rem;
}
.section_article-content .article-page_main {
  min-width: 0;
}
.section_article-content .article-page_head {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.section_article-content .article-page_title {
  margin: 0;
  color: #100f0f;
  font-size: 2.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.section_article-content .article-page_intro p {
  margin: 0;
  color: #656d63;
  font-size: 1rem;
  line-height: 1.7;
}
.section_article-content .article-page_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
}
.section_article-content .article-page_badge {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0.0625rem 0.975rem 0;
  background-color: #628859;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.66;
  letter-spacing: 0.02em;
}
.section_article-content .article-page_meta-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #656d63;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.section_article-content .article-page_dot {
  flex: none;
  width: 0.1875rem;
  height: 0.1875rem;
  border-radius: 50%;
  background-color: currentColor;
}
.section_article-content .article-page_figure {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 5rem 0 0;
}
.section_article-content .article-page_media {
  height: 29.625rem;
  overflow: hidden;
  border-radius: 0.625rem;
  background-color: var(--color--grey, #f6f6f6);
}
.section_article-content .article-page_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_article-content .article-page_caption {
  color: #656d63;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* Fließtext des Beitrags */
.section_article-content .article-page_body {
  margin-top: 5rem;
  color: #656d63;
  font-size: 1rem;
  line-height: 1.7;
}
.section_article-content .article-page_body h2 {
  margin: 5rem 0 1.25rem;
  color: var(--color--dark, #232e20);
  font-size: 2rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
  scroll-margin-top: 8rem;
}
.section_article-content .article-page_body h3 {
  margin: 2.5rem 0 0.75rem;
  color: var(--color--dark, #232e20);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.section_article-content .article-page_body h4 {
  margin: 2rem 0 0.5rem;
  color: var(--color--dark, #232e20);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
}
.section_article-content .article-page_body > :first-child {
  margin-top: 0;
}
.section_article-content .article-page_body p {
  margin: 0 0 1.7em;
}
.section_article-content .article-page_body h2 + p,
.section_article-content .article-page_body h3 + p,
.section_article-content .article-page_body h4 + p {
  margin-top: 0;
}
.section_article-content .article-page_body strong,
.section_article-content .article-page_body b {
  color: var(--color--dark, #232e20);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.section_article-content .article-page_body ul,
.section_article-content .article-page_body ol {
  margin: 0 0 1.7em;
  padding-left: 1.5rem;
}
.section_article-content .article-page_body li {
  margin-bottom: 0;
}
.section_article-content .article-page_body img {
  display: block;
  width: 100%;
  height: auto;
  margin: 2.5rem 0 0.75rem;
  border-radius: 0.625rem;
}
.section_article-content .article-page_body figure {
  margin: 2.5rem 0;
}
.section_article-content .article-page_body figure img {
  margin: 0 0 0.75rem;
}
.section_article-content .article-page_body figcaption {
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.section_article-content .article-page_body blockquote {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin: 2.5rem 0;
  padding: 3.125rem;
  border: 0;
  background-image: linear-gradient(179.07deg, #f7f7f7 1.95%, #ffffff 60.99%, #f7f7f7 115.66%);
}
.section_article-content .article-page_body blockquote p {
  max-width: 37.6875rem;
  margin: 0;
  color: #100f0f;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.section_article-content .article-page_body blockquote cite,
.section_article-content .article-page_body blockquote footer,
.section_article-content .article-page_body blockquote p:last-child:not(:first-child) {
  color: #656d63;
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.7;
  letter-spacing: 0;
}

/* Pressemitteilungen & Medienmaterial (Metafeld custom.press_materials) */
.section_article-content .article-page_press {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 5rem;
}
.section_article-content .article-page_press-title {
  margin: 0;
  color: var(--color--dark, #232e20);
  font-size: 2rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.section_article-content .article-page_press-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section_article-content .article-press {
  display: flex;
  align-items: center;
  gap: 3rem;
  min-height: 13.1875rem;
  padding: 0.5rem;
  border-radius: 0.625rem;
  background-color: #ffffff;
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
}
.section_article-content .article-press_media {
  position: relative;
  flex: none;
  align-self: stretch;
  width: 14.125rem;
  min-height: 12.1875rem;
  overflow: hidden;
  border-radius: 0.625rem;
  background-color: var(--color--grey, #f6f6f6);
}
.section_article-content .article-press_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_article-content .article-press_badge {
  position: absolute;
  top: 0.625rem;
  left: 0;
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0.0625rem 0.975rem 0;
  background-color: var(--color--red, #c5393c);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.66;
  letter-spacing: 0.02em;
}
.section_article-content .article-press_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  min-width: 0;
  max-width: 21.25rem;
  padding: 1.5rem 1.5rem 1.5rem 0;
}
.section_article-content .article-press_content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.section_article-content .article-press_text-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.section_article-content .article-press_title {
  margin: 0;
  color: var(--color--dark, #232e20);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.section_article-content .article-press_text,
.section_article-content .article-press_text p {
  margin: 0;
  color: rgba(35, 46, 32, 0.7);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.section_article-content .article-press_meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color--dark, #232e20);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.section_article-content .article-press_meta .article-page_dot {
  width: 0.125rem;
  height: 0.125rem;
}
.section_article-content .article-press_link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color--red, #c5393c);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}
.section_article-content .article-press_icon {
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
}
.section_article-content .article-press_icon .icon-svg {
  width: 100%;
  height: 100%;
}

/* Seitenleiste: Inhaltsverzeichnis, Teilen, PDF */
.section_article-content .article-page_aside {
  position: sticky;
  top: 7.5rem;
  min-width: 0;
}
.section_article-content .article-page_sticky {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.section_article-content .article-page_box {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem 2rem;
  overflow: hidden;
  border-radius: 0.625rem;
  background-color: #ffffff;
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
}
.section_article-content .article-page_box-title {
  margin: 0;
  color: var(--color--dark, #232e20);
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
.section_article-content .article-page_toc {
  padding: 2.5rem;
}
.section_article-content .article-page_toc-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding-left: 1.5rem;
  color: #100f0f;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  list-style: decimal;
}
.section_article-content .article-page_toc-list li {
  padding-left: 0.125rem;
}
.section_article-content .article-page_toc-list li::marker {
  color: currentColor;
}
.section_article-content .article-page_toc-link {
  color: inherit;
  text-decoration: none;
  opacity: 0.4;
  transition: opacity var(--transition--fast, 0.2s);
}
.section_article-content .article-page_toc-link.is-active {
  opacity: 1;
}
.section_article-content .article-page_share {
  background-color: var(--color--red, #c5393c);
  box-shadow: none;
}
.section_article-content .article-page_share .article-page_box-title {
  color: #ffffff;
}
.section_article-content .article-page_share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.section_article-content .article-page_share-icons {
  display: flex;
  align-items: center;
  gap: 1.125rem;
}
.section_article-content .article-page_share-link {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: opacity var(--transition--fast, 0.2s);
}
.section_article-content .article-page_share-link .icon-svg {
  width: 100%;
  height: 100%;
}
.section_article-content .article-page_chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 1.3125rem 0.4375rem 1.0625rem;
  border: 0;
  background-color: #ffffff;
  color: var(--color--dark, #232e20);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition--fast, 0.2s), color var(--transition--fast, 0.2s);
}
.section_article-content .article-page_chip.is-red {
  background-color: var(--color--red, #c5393c);
  color: #ffffff;
}
.section_article-content .article-page_chip-icon {
  display: flex;
  width: 1rem;
  height: 1rem;
}
.section_article-content .article-page_chip-icon .icon-svg {
  width: 100%;
  height: 100%;
}
.section_article-content .article-page_pdf {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
@media (hover: hover) {
  .section_article-content .article-page_back:hover,
  .section_article-content .article-press_link:hover {
    color: var(--color--red-dark, #a52d30);
  }
  .section_article-content .article-page_toc-link:hover {
    opacity: 1;
  }
  .section_article-content .article-page_share-link:hover {
    opacity: 0.75;
  }
  .section_article-content .article-page_chip:hover {
    background-color: var(--color--dark, #232e20);
    color: #ffffff;
  }
  .section_article-content .article-page_chip.is-red:hover {
    background-color: var(--color--red-dark, #a52d30);
  }
}

/* ---------- Ähnliche Beiträge / Weitere News (Slider) ---------- */
.section_related-articles {
  overflow-x: clip;
}
.section_related-articles .section-head {
  margin-bottom: 2.5rem;
}
.section_related-articles .slider-nav {
  margin-top: 2.5rem;
}
.section_related-articles .slider-nav_button {
  background-color: var(--color--grey, #f6f6f6);
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .section_blog-index .blog-index_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section_newsroom-index .newsroom-index_title {
    font-size: 2.75rem;
  }
  .section_newsroom-index .newsroom-feature_body {
    padding: 2.5rem;
  }
  .section_newsroom-index .newsroom-feature_media {
    width: 45%;
  }
  .section_newsroom-index .newsroom-index_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section_newsroom-kit .newsroom-kit_card {
    padding: 2.5rem;
  }
  .section_article-content .article-page_layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
  }
  .section_article-content .article-page_aside {
    position: static;
  }
  .section_article-content .article-page_sticky {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .section_article-content .article-page_toc {
    grid-row: span 2;
  }
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  .section_blog-index .blog-index_tools {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 1.5rem;
  }
  .section_blog-index .blog-index_tab {
    min-width: 0;
    padding: 0.75rem 1.25rem;
  }
  .section_blog-index .blog-index_sort {
    align-self: flex-start;
  }
  .section_blog-index .blog-index_sort .lf-dropdown_panel {
    left: 0;
    right: auto;
  }
  .section_blog-index .blog-index_grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
  }

  .section_newsroom-index .newsroom-index_head {
    gap: 1rem;
  }
  .section_newsroom-index .newsroom-index_eyebrow {
    font-size: 1.0625rem;
  }
  .section_newsroom-index .newsroom-index_title {
    font-size: 2.125rem;
  }
  .section_newsroom-index .newsroom-index_topics {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: calc(100% + 2rem);
    margin: 1.5rem -1rem 0;
    padding: 0 1rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .section_newsroom-index .newsroom-index_topics::-webkit-scrollbar {
    display: none;
  }
  .section_newsroom-index .newsroom-index_topic {
    flex: none;
    padding: 0.75rem 1.25rem 0.625rem;
    font-size: 1.0625rem;
  }
  .section_newsroom-index .newsroom-index_featured {
    margin-top: 2.5rem;
  }
  .section_newsroom-index .swiper-slide.newsroom-index_slide {
    width: 85vw;
  }
  .section_newsroom-index .newsroom-feature {
    flex-direction: column-reverse;
    min-height: 0;
  }
  .section_newsroom-index .newsroom-feature_media {
    width: auto;
    height: 14rem;
  }
  .section_newsroom-index .newsroom-feature_body {
    gap: 1.5rem;
    padding: 1rem 1.5rem 1.75rem;
  }
  .section_newsroom-index .newsroom-feature_title {
    font-size: 1.5rem;
  }
  .section_newsroom-index .newsroom-feature_button {
    align-self: stretch;
    margin-top: 0;
    padding: 1rem 1.5rem;
  }
  .section_newsroom-index .newsroom-index_featured .slider-nav {
    margin-top: 2rem;
  }
  .section_newsroom-index .newsroom-index_tools {
    gap: 1rem;
    margin-top: 2.5rem;
  }
  .section_newsroom-index .newsroom-index_search-button {
    padding: 0 1.25rem;
  }
  .section_newsroom-index .newsroom-index_filters {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .section_newsroom-index .newsroom-index_sort .lf-dropdown_panel {
    left: 0;
    right: auto;
  }
  .section_newsroom-index .newsroom-index_grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
    margin-top: 1.5rem;
  }
  .section_newsroom-index .newsroom-index_more {
    margin-top: 2.5rem;
  }
  .section_newsroom-index .newsroom-index_more-button {
    width: 100%;
    min-width: 0;
  }

  .section_newsroom-press .section-head {
    margin-bottom: 2rem;
  }
  .section_newsroom-press .swiper-slide.newsroom-press_slide {
    width: 20rem;
  }
  .section_newsroom-press .newsroom-press_card {
    gap: 2rem;
    padding: 2rem 1.5rem;
  }
  .section_newsroom-press .newsroom-press_title {
    font-size: 1.25rem;
  }

  .section_newsroom-kit .newsroom-kit_head {
    margin-bottom: 2rem;
  }
  .section_newsroom-kit .newsroom-kit_grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .section_newsroom-kit .newsroom-kit_card {
    gap: 2rem;
    padding: 2rem 1.5rem;
  }
  .section_newsroom-kit .newsroom-kit_circle {
    width: 5rem;
    height: 5rem;
  }
  .section_newsroom-kit .newsroom-kit_title {
    font-size: 1.25rem;
  }
  .section_newsroom-kit .newsroom-kit_button {
    width: 100%;
    min-width: 0;
  }

  .section_article-content .article-page_back {
    margin-bottom: 1.25rem;
  }
  .section_article-content .article-page_head {
    gap: 1.25rem;
  }
  .section_article-content .article-page_title {
    font-size: 1.75rem;
  }
  .section_article-content .article-page_figure {
    margin-top: 2.5rem;
  }
  .section_article-content .article-page_media {
    height: 15rem;
  }
  .section_article-content .article-page_body {
    margin-top: 2.5rem;
  }
  .section_article-content .article-page_body h2 {
    margin-top: 3rem;
    font-size: 1.5rem;
  }
  .section_article-content .article-page_body h3 {
    margin-top: 2rem;
    font-size: 1.25rem;
  }
  .section_article-content .article-page_body blockquote {
    padding: 1.75rem 1.5rem;
  }
  .section_article-content .article-page_body blockquote p {
    font-size: 1.0625rem;
  }
  .section_article-content .article-page_press {
    margin-top: 3rem;
  }
  .section_article-content .article-page_press-title {
    font-size: 1.5rem;
  }
  .section_article-content .article-press {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .section_article-content .article-press_media {
    width: auto;
    min-height: 11rem;
  }
  .section_article-content .article-press_body {
    max-width: none;
    padding: 1.25rem 1rem 1rem;
  }
  .section_article-content .article-press_title {
    font-size: 1.25rem;
  }
  .section_article-content .article-page_sticky {
    display: flex;
  }
  .section_article-content .article-page_toc {
    padding: 1.75rem 1.5rem;
  }
  .section_article-content .article-page_box {
    padding: 1.5rem;
  }

  .section_related-articles .section-head {
    margin-bottom: 2rem;
  }
  .section_related-articles .slider-nav {
    margin-top: 2rem;
  }
}

/* 142. Karriere / Jobs (Figma 10761-7184 / 10761-22614 / 10761-23285) */

/* --- Gemeinsame Bausteine: rote Promo-Karte mit Handschrift-Label --- */
.section_job-detail .job-promo,
.section_job-faq .job-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  overflow: hidden;
  padding: 0 3.75rem 2.5rem;
  border-radius: var(--radius--medium);
  background-color: var(--color--red);
  color: var(--color--white);
  text-align: center;
}
.section_job-detail .job-promo_script,
.section_job-faq .job-promo_script {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding-top: 2.25rem;
  margin-bottom: 3rem;
  font-family: var(--font--script);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.66;
  letter-spacing: 0.002em;
  opacity: 0.8;
  white-space: nowrap;
}
.section_job-detail .job-promo_script::before,
.section_job-faq .job-promo_script::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 7.5rem;
  height: 6.25rem;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.21);
}
.section_job-detail .job-promo_body,
.section_job-faq .job-promo_body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 17.5rem;
}
.section_job-detail .job-promo_title,
.section_job-faq .job-promo_title {
  margin: 0;
  font-size: var(--font-size--h3);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}
.section_job-detail .job-promo_text,
.section_job-faq .job-promo_text {
  margin: 0;
  font-size: var(--font-size--body-2);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
}
.section_job-detail .job-promo_button,
.section_job-faq .job-promo_button {
  width: 100%;
  max-width: 16.625rem;
  padding-left: var(--space--24);
  padding-right: var(--space--24);
}

/* --- Stellen Liste (Figma 10761-7554) --- */
.section_jobs-list .jobs-list_head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 36rem;
  margin-bottom: 5rem;
}
.section_jobs-list .jobs-list_eyebrow {
  margin: 0;
  color: var(--section-eyebrow, #656d63);
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
.section_jobs-list .jobs-list_title {
  margin: 0;
  color: var(--section-fg, var(--color--dark));
  font-size: var(--font-size--h2);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}
.section_jobs-list .jobs-list_text {
  color: #656d63;
  font-size: var(--font-size--body);
  line-height: 1.7;
}
.section_jobs-list .jobs-list_body {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}
.section_jobs-list .jobs-list_sr {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  margin: -0.0625rem;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Toolbar: Filter-Pills + Sortierung */
.section_jobs-list .jobs-list_toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
}
.section_jobs-list .jobs-list_toolbar[hidden] {
  display: none;
}
.section_jobs-list .jobs-list_filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--8);
}
.section_jobs-list .jobs-list_pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--grey);
  color: var(--color--dark);
  transition: background-color var(--transition--fast), box-shadow var(--transition--fast);
}
.section_jobs-list .jobs-list_pill[hidden] {
  display: none;
}
.section_jobs-list .jobs-list_pill.is-active {
  box-shadow: inset 0 0 0 0.0625rem var(--color--dark);
}
.section_jobs-list .jobs-list_pill:focus-within {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
.section_jobs-list .jobs-list_select {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0.75rem 2.5rem 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--radius--pill);
  background: transparent;
  color: inherit;
  font-family: var(--font--family);
  font-size: var(--font-size--link-2);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  cursor: pointer;
}
.section_jobs-list .jobs-list_select:focus {
  outline: none;
}
.section_jobs-list .jobs-list_pill.is-sort {
  padding-left: 1.5rem;
}
.section_jobs-list .jobs-list_sort-label {
  font-size: var(--font-size--link-2);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  white-space: nowrap;
}
.section_jobs-list .jobs-list_select.is-sort {
  padding-left: 0.25rem;
  color: var(--color--red);
}
.section_jobs-list .jobs-list_caret {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  display: flex;
  width: 0.75rem;
  height: 0.75rem;
  transform: translateY(-50%);
  pointer-events: none;
}
.section_jobs-list .jobs-list_caret .icon-svg {
  width: 0.75rem;
  height: 0.75rem;
}
@media (hover: hover) {
  .section_jobs-list .jobs-list_pill:hover {
    background-color: var(--color--grey-dark);
  }
}

/* Liste */
.section_jobs-list .jobs-list_list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.section_jobs-list .jobs-list_loop {
  display: contents;
}
.section_jobs-list .jobs-list_loop[hidden] {
  display: none;
}
.section_jobs-list .jobs-list_item {
  padding-bottom: 1.5rem;
  border-bottom: 0.0625rem solid rgba(101, 109, 99, 0.2);
}
.section_jobs-list .jobs-list_link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 9.375rem;
  color: inherit;
  text-decoration: none;
}
.section_jobs-list .jobs-list_link:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.5rem;
  border-radius: 0.25rem;
}
.section_jobs-list .jobs-list_main {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  max-width: 37.875rem;
}
.section_jobs-list .jobs-list_name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}
.section_jobs-list .jobs-list_name {
  margin: 0;
  color: var(--section-fg, var(--color--dark));
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: var(--tracking--h4);
  transition: color var(--transition--fast);
}
.section_jobs-list .jobs-list_badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.9225rem 0.245rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--red);
  color: var(--color--white);
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  white-space: nowrap;
}
.section_jobs-list .jobs-list_date {
  color: #656d63;
  font-size: var(--font-size--body);
  line-height: 1.7;
}
.section_jobs-list .jobs-list_meta {
  display: grid;
  grid-template-columns: 12.125rem 6.25rem 9.375rem;
  gap: 2.5rem;
  flex: none;
  padding-top: 0.0625rem;
}
.section_jobs-list .jobs-list_meta-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  color: #656d63;
  font-size: var(--font-size--body);
  line-height: 1.7;
}
.section_jobs-list .jobs-list_meta-item.is-location {
  grid-column: 1;
}
.section_jobs-list .jobs-list_meta-item.is-type {
  grid-column: 2;
}
.section_jobs-list .jobs-list_meta-item.is-model {
  grid-column: 3;
}
.section_jobs-list .jobs-list_icon {
  display: inline-flex;
  flex: none;
  color: var(--color--red);
  line-height: 0;
}
.section_jobs-list .jobs-list_icon .icon-svg {
  width: 1.4375rem;
  height: 1.4375rem;
}
@media (hover: hover) {
  .section_jobs-list .jobs-list_link:hover .jobs-list_name {
    color: var(--color--red);
  }
}

.section_jobs-list .jobs-list_no-match,
.section_jobs-list .jobs-list_empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--12);
  padding: var(--space--24) 0;
  color: #656d63;
}
.section_jobs-list .jobs-list_no-match[hidden] {
  display: none;
}
.section_jobs-list .jobs-list_reset {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color--dark);
  font-family: inherit;
  font-size: var(--font-size--link-2);
  font-weight: 600;
  letter-spacing: var(--tracking--link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Initiativ-Leiste */
.section_jobs-list .jobs-list_cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--24);
  margin-top: 3rem;
  padding: 2rem 2.5rem;
  border-radius: var(--radius--medium);
  background-color: var(--color--red);
  color: var(--color--white);
}
.section_jobs-list .jobs-list_cta-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 56.25rem;
}
.section_jobs-list .jobs-list_cta-title {
  margin: 0;
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: var(--tracking--h4);
}
.section_jobs-list .jobs-list_cta-copy {
  margin: 0;
  font-size: var(--font-size--body-2);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
}
.section_jobs-list .jobs-list_cta-button {
  flex: none;
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

@media (max-width: 991px) {
  .section_jobs-list .jobs-list_link {
    flex-direction: column;
    gap: 1rem;
  }
  .section_jobs-list .jobs-list_main {
    max-width: none;
  }
  .section_jobs-list .jobs-list_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
  }
}
@media (max-width: 767px) {
  .section_jobs-list .jobs-list_head {
    margin-bottom: 2.5rem;
  }
  .section_jobs-list .jobs-list_body {
    gap: 2rem;
  }
  .section_jobs-list .jobs-list_toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .section_jobs-list .jobs-list_filters {
    flex-wrap: nowrap;
    margin: 0 calc(-1 * var(--space--20));
    padding: 0.125rem var(--space--20);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .section_jobs-list .jobs-list_filters::-webkit-scrollbar {
    display: none;
  }
  .section_jobs-list .jobs-list_pill {
    flex: none;
  }
  .section_jobs-list .jobs-list_pill.is-sort {
    align-self: flex-start;
  }
  .section_jobs-list .jobs-list_list {
    gap: 1.75rem;
  }
  .section_jobs-list .jobs-list_item {
    padding-bottom: 1.25rem;
  }
  .section_jobs-list .jobs-list_main {
    gap: 0.375rem;
  }
  .section_jobs-list .jobs-list_date,
  .section_jobs-list .jobs-list_meta-item {
    font-size: var(--font-size--body-2);
  }
  .section_jobs-list .jobs-list_icon .icon-svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .section_jobs-list .jobs-list_badge {
    font-size: 0.875rem;
  }
  .section_jobs-list .jobs-list_cta {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 1.5rem;
    padding: 1.5rem;
  }
  .section_jobs-list .jobs-list_cta-button {
    width: 100%;
    padding-left: var(--space--24);
    padding-right: var(--space--24);
  }
}

/* --- Stelle Detail (Figma 10761-22614, oberer Teil) --- */
.section_job-detail .job-page_back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2.625rem;
  color: var(--color--dark);
  font-size: var(--font-size--link-2);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  text-decoration: none;
}
.section_job-detail .job-page_back-icon {
  display: inline-flex;
  line-height: 0;
}
.section_job-detail .job-page_back-icon .icon-svg {
  width: 0.625rem;
  height: 0.625rem;
}
@media (hover: hover) {
  .section_job-detail .job-page_back:hover {
    color: var(--color--red);
  }
}
.section_job-detail .job-page_layout {
  display: grid;
  grid-template-columns: minmax(0, 43.75rem) minmax(0, 26.25rem);
  justify-content: space-between;
  align-items: start;
  gap: 3rem;
}
.section_job-detail .job-page_main {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  min-width: 0;
}
.section_job-detail .job-page_intro {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.section_job-detail .job-page_title {
  margin: 0;
  color: var(--color--dark);
  font-size: var(--font-size--h1);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: var(--tracking--heading);
  text-wrap: balance;
}
.section_job-detail .job-page_rich,
.section_job-detail .job-page_lead {
  color: #656d63;
  font-size: var(--font-size--body);
  line-height: 1.7;
}
.section_job-detail .job-page_rich p {
  margin-bottom: 1.7em;
}
.section_job-detail .job-page_rich > :last-child,
.section_job-detail .job-page_rich p:last-child {
  margin-bottom: 0;
}
.section_job-detail .job-page_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
}
.section_job-detail .job-page_meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: #656d63;
  font-size: var(--font-size--body);
  line-height: 1.7;
}
.section_job-detail .job-page_icon {
  display: inline-flex;
  color: var(--color--red);
  line-height: 0;
}
.section_job-detail .job-page_icon .icon-svg {
  width: 1.4375rem;
  height: 1.4375rem;
}
.section_job-detail .job-page_block {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.section_job-detail .job-page_heading {
  margin: 0;
  color: var(--color--dark);
  font-size: var(--font-size--h2);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}
/* Listen: rote Punkte, 16px Einzug */
.section_job-detail .job-page_rich ul,
.section_job-detail .job-page_rich ol {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section_job-detail .job-page_rich li {
  position: relative;
  margin: 0;
  padding-left: 1rem;
}
.section_job-detail .job-page_rich li::before {
  content: "";
  position: absolute;
  top: 0.625em;
  left: 0;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: var(--color--red);
}
/* Kernaufgaben: jede Zwischenueberschrift mit rotem Punkt, Text eingerueckt */
.section_job-detail .is-tasks .job-page_rich h2,
.section_job-detail .is-tasks .job-page_rich h3,
.section_job-detail .is-tasks .job-page_rich h4,
.section_job-detail .is-tasks .job-page_rich h5,
.section_job-detail .is-tasks .job-page_rich h6 {
  position: relative;
  margin: 1.75rem 0 0.375rem;
  padding-left: 1rem;
  color: var(--color--dark);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.section_job-detail .is-tasks .job-page_rich > :first-child {
  margin-top: 0;
}
.section_job-detail .is-tasks .job-page_rich h2::before,
.section_job-detail .is-tasks .job-page_rich h3::before,
.section_job-detail .is-tasks .job-page_rich h4::before,
.section_job-detail .is-tasks .job-page_rich h5::before,
.section_job-detail .is-tasks .job-page_rich h6::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: var(--color--red);
}
.section_job-detail .is-tasks .job-page_rich p {
  margin: 0;
  padding-left: 1rem;
}
.section_job-detail .job-page_media {
  overflow: hidden;
  border-radius: var(--radius--medium);
  aspect-ratio: 700 / 474;
  background-color: var(--color--grey);
}
.section_job-detail .job-page_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_job-detail .job-page_aside {
  position: sticky;
  top: calc(var(--nav--height, 4rem) + var(--nav--topbar-height, 2.125rem) + 1.5rem);
  grid-column: 2;
  grid-row: 1;
}
.section_job-detail .job-promo {
  min-height: 25.875rem;
  justify-content: flex-start;
}

@media (max-width: 991px) {
  .section_job-detail .job-page_layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .section_job-detail .job-page_aside {
    position: static;
    grid-column: 1;
    grid-row: auto;
  }
  .section_job-detail .job-promo {
    min-height: 0;
  }
}
@media (max-width: 767px) {
  .section_job-detail .job-page_back {
    margin-bottom: 1.5rem;
  }
  .section_job-detail .job-page_main {
    gap: 3rem;
  }
  .section_job-detail .job-page_intro {
    gap: 1.5rem;
  }
  .section_job-detail .job-page_meta {
    gap: 0.5rem 1.5rem;
  }
  .section_job-detail .job-page_meta-item {
    font-size: var(--font-size--body-2);
  }
  .section_job-detail .job-page_icon .icon-svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .section_job-detail .job-page_block {
    gap: 1.25rem;
  }
  .section_job-detail .is-tasks .job-page_rich h2,
  .section_job-detail .is-tasks .job-page_rich h3,
  .section_job-detail .is-tasks .job-page_rich h4,
  .section_job-detail .is-tasks .job-page_rich h5,
  .section_job-detail .is-tasks .job-page_rich h6 {
    font-size: 1.125rem;
  }
  .section_job-detail .job-promo {
    padding: 0 1.5rem 2rem;
  }
  .section_job-detail .job-promo_script {
    margin-bottom: 1.5rem;
    font-size: 1.625rem;
  }
}

/* --- Bewerbung Schritte (Figma 10761-22732) --- */
.section_apply-steps .apply-steps_head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.section_apply-steps .apply-steps_eyebrow {
  margin: 0;
  color: var(--section-eyebrow, #656d63);
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
.section_apply-steps .apply-steps_title {
  margin: 0;
  color: var(--section-fg, var(--color--dark));
  font-size: var(--font-size--h2);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}
.section_apply-steps .apply-steps_media {
  overflow: hidden;
  margin-bottom: 3.75rem;
  border-radius: var(--radius--medium);
  aspect-ratio: 1280 / 361;
  background-color: var(--color--grey);
}
.section_apply-steps .apply-steps_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_apply-steps .apply-steps_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: apply-step;
}
.section_apply-steps .apply-steps_item {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  counter-increment: apply-step;
}
.section_apply-steps .apply-steps_marker {
  display: flex;
  align-items: center;
  gap: 1.875rem;
}
.section_apply-steps .apply-steps_line {
  flex: 1 1 0;
  height: 0.0625rem;
  background-color: rgba(92, 127, 83, 0.2);
}
.section_apply-steps .apply-steps_number {
  flex: none;
  color: var(--section-fg, var(--color--dark));
  font-family: var(--font--script);
  font-size: 2.25rem;
  line-height: 1.66;
  letter-spacing: 0.002em;
}
.section_apply-steps .apply-steps_number::before {
  content: counter(apply-step, decimal-leading-zero);
}
.section_apply-steps .apply-steps_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6875rem;
  padding: 0 1rem;
  text-align: center;
}
.section_apply-steps .apply-steps_item-title {
  margin: 0;
  color: var(--section-fg, var(--color--dark));
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: var(--tracking--h4);
}
.section_apply-steps .apply-steps_item-text {
  max-width: 18.75rem;
  margin: 0;
  color: #656d63;
  font-size: var(--font-size--body-2);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
}
@media (max-width: 767px) {
  .section_apply-steps .apply-steps_media {
    margin-bottom: 2rem;
    aspect-ratio: 4 / 3;
  }
  .section_apply-steps .apply-steps_list {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .section_apply-steps .apply-steps_item {
    gap: 1rem;
  }
  .section_apply-steps .apply-steps_number {
    font-size: 1.75rem;
  }
}

/* --- Karriere FAQ (Figma 10761-22766) --- */
.section_job-faq .job-faq_layout {
  display: grid;
  grid-template-columns: minmax(0, 46.5rem) minmax(0, 25rem);
  justify-content: space-between;
  align-items: start;
  gap: 3rem;
}
.section_job-faq .job-faq_list {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  min-width: 0;
}
.section_job-faq .job-faq_q {
  margin: 0;
  font-size: inherit;
}
.section_job-faq .job-faq_toggle {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color--dark);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.section_job-faq .job-faq_toggle:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.25rem;
  border-radius: 0.25rem;
}
.section_job-faq .job-faq_q-text {
  flex: 1 1 0;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.section_job-faq .job-faq_icon {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color--grey);
  transition: background-color var(--transition--fast);
}
.section_job-faq .job-faq_icon::before,
.section_job-faq .job-faq_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 0.125rem;
  border-radius: 0.0625rem;
  background-color: var(--color--dark);
  transform: translate(-50%, -50%);
  transition: transform var(--transition--fast);
}
.section_job-faq .job-faq_icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.section_job-faq .job-faq_item.is-open .job-faq_icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
@media (hover: hover) {
  .section_job-faq .job-faq_toggle:hover .job-faq_icon {
    background-color: var(--color--grey-dark);
  }
}
.section_job-faq .job-faq_panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease;
}
.section_job-faq .job-faq_item.is-open .job-faq_panel {
  grid-template-rows: 1fr;
}
.section_job-faq .job-faq_panel-inner {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear 240ms;
}
.section_job-faq .job-faq_item.is-open .job-faq_panel-inner {
  visibility: visible;
  transition-delay: 0s;
}
.section_job-faq .job-faq_answer {
  max-width: 38rem;
  padding-top: 0.75rem;
  color: #656d63;
  font-size: var(--font-size--body);
  line-height: 1.7;
}
.section_job-faq .job-promo {
  justify-content: flex-start;
  min-height: 25.875rem;
}
@media (prefers-reduced-motion: reduce) {
  .section_job-faq .job-faq_panel,
  .section_job-faq .job-faq_panel-inner,
  .section_job-faq .job-faq_icon::after {
    transition: none;
  }
}
@media (max-width: 991px) {
  .section_job-faq .job-faq_layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .section_job-faq .job-promo {
    min-height: 0;
  }
}
@media (max-width: 767px) {
  .section_job-faq .job-faq_list {
    gap: 2rem;
  }
  .section_job-faq .job-faq_q-text {
    font-size: 1.0625rem;
  }
  .section_job-faq .job-faq_toggle {
    gap: 1rem;
  }
  .section_job-faq .job-faq_icon {
    width: 2.25rem;
    height: 2.25rem;
  }
  .section_job-faq .job-faq_answer {
    font-size: var(--font-size--body-2);
  }
  .section_job-faq .job-promo {
    padding: 0 1.5rem 2rem;
  }
  .section_job-faq .job-promo_script {
    margin-bottom: 1.5rem;
    font-size: 1.625rem;
  }
}

/* --- Stelle Banner (Figma 10761-22810) --- */
.section_job-banner .section_inner {
  overflow: hidden;
  background-color: #37437e;
}
.section_job-banner .job-banner_bg {
  position: absolute;
  inset: 0;
}
.section_job-banner .job-banner_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_job-banner .job-banner_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(3, 15, 33, 0.55) 0%, rgba(3, 15, 33, 0.3) 40%, rgba(3, 15, 33, 0) 65%);
}
.section_job-banner .container-large,
.section_job-banner .container-medium,
.section_job-banner .container-small,
.section_job-banner .container-full {
  position: relative;
}
.section_job-banner .job-banner_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 33.75rem;
  padding: 7.125rem 0 3.75rem;
  color: var(--color--white);
}
.section_job-banner .job-banner_script {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  padding: 2.9rem 0 0 1.8rem;
  font-family: var(--font--script);
  font-size: 2.25rem;
  line-height: 1.66;
  letter-spacing: 0.002em;
  opacity: 0.8;
  white-space: nowrap;
}
.section_job-banner .job-banner_script::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1.1875rem;
  left: 0;
  width: 10rem;
  height: 8.375rem;
  background-color: rgba(255, 255, 255, 0.21);
  -webkit-backdrop-filter: blur(0.125rem);
  backdrop-filter: blur(0.125rem);
}
.section_job-banner .job-banner_copy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 29.25rem;
  margin-bottom: 1.75rem;
}
.section_job-banner .job-banner_title {
  margin: 0;
  font-size: var(--font-size--h3);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}
.section_job-banner .job-banner_text {
  margin: 0;
  font-size: var(--font-size--body);
  line-height: 1.7;
}
.section_job-banner .job-banner_button {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}
@media (max-width: 767px) {
  .section_job-banner .job-banner_content {
    min-height: 28rem;
    padding: 7rem 0 2.5rem;
  }
  .section_job-banner .job-banner_bg::after {
    background-image: linear-gradient(0deg, rgba(3, 15, 33, 0.7) 0%, rgba(3, 15, 33, 0.35) 55%, rgba(3, 15, 33, 0.1) 100%);
  }
  .section_job-banner .job-banner_script {
    padding: 2rem 0 0 1rem;
    font-size: 1.625rem;
  }
  .section_job-banner .job-banner_script::before {
    width: 7.5rem;
    height: 6.25rem;
  }
  .section_job-banner .job-banner_button {
    width: 100%;
  }
}

/* --- Stelle Bewerbung (Figma 10761-23285) --- */
.section_job-apply .job-apply_layout {
  display: grid;
  grid-template-columns: minmax(0, 28.5rem) minmax(0, 43.75rem);
  justify-content: space-between;
  align-items: start;
  gap: 3rem;
}
.section_job-apply .job-apply_intro {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}
.section_job-apply .job-apply_head {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.section_job-apply .job-apply_eyebrow {
  margin: 0;
  color: #656d63;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.section_job-apply .job-apply_title {
  max-width: 26.3125rem;
  margin: 0;
  color: var(--color--dark);
  font-size: var(--font-size--h2);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}
.section_job-apply .job-apply_checks {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: -0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.section_job-apply .job-apply_check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color--dark);
  font-size: var(--font-size--link);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
}
.section_job-apply .job-apply_check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--color--red);
  color: var(--color--white);
}
.section_job-apply .job-apply_check-icon .icon-svg {
  width: 0.625rem;
  height: 0.625rem;
}
.section_job-apply .job-apply_contact {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 22.6875rem;
  padding: 0.375rem;
  border-radius: var(--radius--medium);
  background-color: var(--color--grey);
}
.section_job-apply .job-apply_contact-media {
  flex: none;
  width: 6.25rem;
  height: 6.25rem;
  overflow: hidden;
  border-radius: 0.25rem;
  background-color: #cce2f1;
}
.section_job-apply .job-apply_contact-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_job-apply .job-apply_contact-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.section_job-apply .job-apply_contact-name {
  margin: 0;
  color: var(--color--dark);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.section_job-apply .job-apply_contact-role {
  margin: 0;
  color: #656d63;
  font-size: var(--font-size--body);
  line-height: 1.7;
}
.section_job-apply .job-apply_back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color--dark);
  font-size: var(--font-size--link-2);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  text-decoration: none;
}
.section_job-apply .job-apply_back-icon {
  display: inline-flex;
  line-height: 0;
}
.section_job-apply .job-apply_back-icon .icon-svg {
  width: 0.625rem;
  height: 0.625rem;
}
@media (hover: hover) {
  .section_job-apply .job-apply_back:hover {
    color: var(--color--red);
  }
}

/* Formular-Karte */
.section_job-apply .job-apply_card {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 3.75rem 5rem;
  border-radius: var(--radius--medium);
  background-color: var(--color--grey);
  scroll-margin-top: 8rem;
}
.section_job-apply .job-apply_card-title {
  margin: 0;
  color: var(--color--dark);
  font-size: var(--font-size--h3);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}
.section_job-apply .job-apply_form {
  display: flex;
  flex-direction: column;
}
.section_job-apply .job-apply_fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.section_job-apply .job-apply_row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.section_job-apply .job-apply_field {
  position: relative;
  display: flex;
  flex-direction: column;
}
.section_job-apply .job-apply_input {
  display: block;
  width: 100%;
  height: 3.25rem;
  margin: 0;
  padding: 1.5rem 1.375rem 0.375rem;
  border: 0.0625rem solid transparent;
  border-radius: 0;
  background-color: var(--color--white);
  color: var(--color--dark);
  font-family: var(--font--family);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  transition: border-color var(--transition--fast), box-shadow var(--transition--fast);
}
.section_job-apply .job-apply_input.is-select {
  padding-right: 3.25rem;
  cursor: pointer;
}
.section_job-apply .job-apply_input.is-textarea {
  height: 9.375rem;
  min-height: 6rem;
  padding-top: 2.25rem;
  padding-bottom: 1rem;
  line-height: 1.5;
  resize: vertical;
}
.section_job-apply .job-apply_input:focus {
  outline: none;
}
.section_job-apply .job-apply_input:focus-visible {
  border-color: var(--color--neutral-dark);
  box-shadow: inset 0 0 0 0.0625rem var(--color--neutral-dark);
}
.section_job-apply .job-apply_label {
  position: absolute;
  top: 1.625rem;
  left: 1.375rem;
  right: 1.375rem;
  transform: translateY(-50%);
  color: #656d63;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: top var(--transition--fast), font-size var(--transition--fast), transform var(--transition--fast);
}
.section_job-apply .job-apply_field.is-select .job-apply_label {
  right: 3.25rem;
}
.section_job-apply .job-apply_field.is-textarea .job-apply_label {
  top: 1.0625rem;
  transform: none;
}
.section_job-apply .job-apply_input:focus + .job-apply_label,
.section_job-apply .job-apply_input:not(:placeholder-shown) + .job-apply_label,
.section_job-apply .job-apply_field.is-select:not(:has(option[value=""]:checked)) .job-apply_label {
  top: 0.375rem;
  transform: none;
  font-size: 0.75rem;
  line-height: 1.6;
}
.section_job-apply .job-apply_caret {
  position: absolute;
  top: 1.625rem;
  right: 1.375rem;
  display: flex;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: var(--color--red);
  pointer-events: none;
}
.section_job-apply .job-apply_caret .icon-svg {
  width: 1rem;
  height: 1rem;
}
.section_job-apply .job-apply_input[aria-invalid="true"] {
  border-color: var(--color--error-dark);
}
.section_job-apply .job-apply_input[aria-invalid="true"] + .job-apply_label {
  color: var(--color--error-dark);
}
.section_job-apply .job-apply_error {
  display: block;
  color: var(--color--error-dark);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.section_job-apply .job-apply_error:not(:empty) {
  margin-top: 0.375rem;
}
.section_job-apply .job-apply_alert,
.section_job-apply .job-apply_success {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius--small);
  font-size: var(--font-size--body-2);
  line-height: 1.5;
}
.section_job-apply .job-apply_alert {
  background-color: var(--color--error);
  color: var(--color--error-dark);
}
.section_job-apply .job-apply_success {
  background-color: var(--color--success);
  color: var(--color--success-dark);
}
.section_job-apply .job-apply_success.is-hidden {
  display: none;
}
.section_job-apply .job-apply_success:focus {
  outline: none;
}
.section_job-apply .job-apply_success p {
  margin: 0;
}
.section_job-apply .job-apply_success-title {
  margin-bottom: 0.25rem !important;
  font-weight: 700;
}

/* Unterlagen-Hinweis (kein Datei-Upload: Shopify-Kontaktformulare koennen keine Dateien senden) */
.section_job-apply .job-apply_docs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 2.5rem 1.5rem;
  background-color: var(--color--white);
  text-align: center;
}
.section_job-apply .job-apply_docs-icon {
  display: inline-flex;
  margin-bottom: 1.25rem;
  color: var(--color--red);
  line-height: 0;
}
.section_job-apply .job-apply_docs-icon .icon-svg {
  width: 2rem;
  height: 2rem;
}
.section_job-apply .job-apply_docs-title {
  margin: 0;
  color: var(--color--dark);
  font-size: var(--font-size--link-2);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
}
.section_job-apply .job-apply_docs-text {
  max-width: 24.5rem;
  margin: 0;
  color: #656d63;
  font-size: var(--font-size--body-3);
  line-height: 1.5;
  letter-spacing: var(--tracking--link-small);
}
.section_job-apply .job-apply_docs-link {
  color: var(--color--red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

/* Einwilligung + Absenden */
.section_job-apply .job-apply_consent {
  margin-top: 0.875rem;
}
.section_job-apply .job-apply_check-field {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.section_job-apply .job-apply_checkbox {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0.125rem 0 0;
  border: 0.0625rem solid rgba(101, 109, 99, 0.4);
  border-radius: 0.125rem;
  background-color: var(--color--white);
  accent-color: var(--color--red);
  cursor: pointer;
}
.section_job-apply .job-apply_checkbox:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
.section_job-apply .job-apply_consent.is-invalid .job-apply_checkbox {
  outline: 0.0625rem solid var(--color--error-dark);
}
.section_job-apply .job-apply_check-label {
  color: var(--color--dark);
  font-size: var(--font-size--body-3);
  line-height: 1.5;
  letter-spacing: var(--tracking--link-small);
  cursor: pointer;
}
.section_job-apply .job-apply_check-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.section_job-apply .job-apply_actions {
  margin-top: 2.5rem;
}
.section_job-apply .job-apply_submit {
  min-width: 16.875rem;
}
.section_job-apply .job-apply_submit[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}
.section_job-apply .job-apply_external {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.section_job-apply .job-apply_external-text {
  margin: 0;
  color: #656d63;
  font-size: var(--font-size--body);
  line-height: 1.7;
}
.section_job-apply .job-apply_ext-icon {
  display: inline-flex;
  line-height: 0;
}
.section_job-apply .job-apply_ext-icon .icon-svg {
  width: 0.75rem;
  height: 0.75rem;
}

@media (max-width: 991px) {
  .section_job-apply .job-apply_layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .section_job-apply .job-apply_card {
    padding: 3rem;
  }
}
@media (max-width: 767px) {
  .section_job-apply .job-apply_intro {
    gap: 1.75rem;
  }
  .section_job-apply .job-apply_eyebrow {
    font-size: 1.0625rem;
  }
  .section_job-apply .job-apply_check {
    font-size: var(--font-size--link-2);
  }
  .section_job-apply .job-apply_card {
    gap: 1.25rem;
    margin: 0 calc(-1 * var(--space--20));
    padding: 2.5rem var(--space--20);
    border-radius: 0;
  }
  .section_job-apply .job-apply_row {
    grid-template-columns: minmax(0, 1fr);
  }
  .section_job-apply .job-apply_actions {
    margin-top: 1.75rem;
  }
  .section_job-apply .job-apply_submit {
    width: 100%;
    min-width: 0;
  }
}

/* --- Karriere Hero (Figma 10761-7266) --- */
.section_career-hero .career-hero_inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--hero-min-height, 46rem);
  overflow: hidden;
  background-color: var(--color--dark);
  color: var(--color--white);
}
.section_career-hero .career-hero_bg {
  position: absolute;
  inset: 0;
}
.section_career-hero .career-hero_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_career-hero .career-hero_shade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.5) 100%);
}
.section_career-hero .container-large,
.section_career-hero .container-medium,
.section_career-hero .container-small,
.section_career-hero .container-full {
  position: relative;
}
.section_career-hero .career-hero_content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 47.875rem;
}
.section_career-hero .career-hero_head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.section_career-hero .career-hero_eyebrow {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.section_career-hero .career-hero_title {
  margin: 0;
  font-size: var(--font-size--h1);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: var(--tracking--heading);
  text-wrap: balance;
}
.section_career-hero .career-hero_list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
}
.section_career-hero .career-hero_pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.8125rem 1.5625rem 0.8125rem;
  border-radius: var(--radius--pill);
  background-color: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(0.3125rem);
  backdrop-filter: blur(0.3125rem);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.08);
  color: var(--color--white);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition--fast);
}
.section_career-hero .career-hero_pill:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.125rem;
}
.section_career-hero .career-hero_badge {
  display: inline-flex;
  align-items: center;
  margin-right: -0.375rem;
  padding: 0.28rem 0.9225rem 0.245rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--red);
  font-size: var(--font-size--h6);
  line-height: 1.2;
}
@media (hover: hover) {
  .section_career-hero .career-hero_pill:hover {
    background-color: rgba(255, 255, 255, 0.36);
  }
}
@media (max-width: 767px) {
  .section_career-hero .career-hero_inner {
    min-height: 36rem;
  }
  .section_career-hero .career-hero_content {
    gap: 1.75rem;
  }
  .section_career-hero .career-hero_head {
    gap: 1rem;
  }
  .section_career-hero .career-hero_eyebrow {
    font-size: 1.0625rem;
  }
  .section_career-hero .career-hero_list {
    flex-wrap: nowrap;
    margin: 0 calc(-1 * var(--space--20));
    padding: 0.625rem var(--space--20);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .section_career-hero .career-hero_list::-webkit-scrollbar {
    display: none;
  }
  .section_career-hero .career-hero_item {
    flex: none;
  }
  .section_career-hero .career-hero_pill {
    min-height: 2.75rem;
    padding: 0.625rem 1.125rem;
    font-size: 1.0625rem;
  }
  .section_career-hero .career-hero_badge {
    font-size: 0.875rem;
  }
}

/* --- Karriere Intro (Figma 10761-7294) --- */
.section_career-intro .career-intro_top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75rem;
  margin-bottom: 5rem;
  text-align: center;
}
.section_career-intro .career-intro_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
}
.section_career-intro .career-intro_eyebrow {
  margin: 0;
  color: var(--section-eyebrow, #656d63);
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
.section_career-intro .career-intro_title {
  margin: 0;
  color: var(--section-fg, var(--color--dark));
  font-size: var(--font-size--h2);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}
.section_career-intro .career-intro_text {
  max-width: 27rem;
  color: #656d63;
  font-size: var(--font-size--body);
  line-height: 1.7;
}
.section_career-intro .career-intro_stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 5.1875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section_career-intro .career-intro_stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--section-fg, var(--color--dark));
}
.section_career-intro .career-intro_stat-value {
  font-family: var(--font--script);
  font-size: 2.5rem;
  line-height: 1.66;
  letter-spacing: 0.002em;
}
.section_career-intro .career-intro_stat-label {
  font-size: var(--font-size--body-2);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
}
.section_career-intro .career-intro_slider {
  position: relative;
}
.section_career-intro .career-intro_swiper {
  overflow: hidden;
}
.section_career-intro .career-intro_slide {
  display: flex;
  align-items: center;
  width: 52.875rem;
  max-width: calc(100% - 7.5rem);
  height: 39.4375rem;
}
.section_career-intro .career-intro_media {
  width: 100%;
  height: 85.7%;
  overflow: hidden;
  border-radius: var(--radius--medium);
  background-color: var(--color--grey);
  transition: height 500ms ease;
}
.section_career-intro .swiper-slide-active .career-intro_media,
.section_career-intro .career-intro_swiper:not(.swiper-initialized) .career-intro_slide:first-child .career-intro_media {
  height: 100%;
}
.section_career-intro .career-intro_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_career-intro .career-intro_nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color--grey);
  color: var(--color--dark);
  transform: translateY(-50%);
  cursor: pointer;
  transition: background-color var(--transition--fast), color var(--transition--fast);
}
.section_career-intro .career-intro_nav[hidden] {
  display: none;
}
.section_career-intro .career-intro_nav.is-prev {
  left: calc(50% - 26.4375rem - 1.75rem);
}
.section_career-intro .career-intro_nav.is-next {
  right: calc(50% - 26.4375rem - 1.75rem);
}
.section_career-intro .career-intro_nav .icon-svg {
  width: 1.4rem;
  height: 1.4rem;
}
.section_career-intro .career-intro_nav:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
.section_career-intro .career-intro_nav.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
@media (hover: hover) {
  .section_career-intro .career-intro_nav:hover {
    background-color: var(--color--dark);
    color: var(--color--white);
  }
}
@media (prefers-reduced-motion: reduce) {
  .section_career-intro .career-intro_media {
    transition: none;
  }
}
@media (max-width: 991px) {
  .section_career-intro .career-intro_slide {
    height: 30rem;
  }
  .section_career-intro .career-intro_nav.is-prev {
    left: 1.5rem;
  }
  .section_career-intro .career-intro_nav.is-next {
    right: 1.5rem;
  }
}
@media (max-width: 767px) {
  .section_career-intro .career-intro_top {
    gap: 2rem;
    margin-bottom: 2.5rem;
  }
  .section_career-intro .career-intro_stats {
    flex-direction: column;
    gap: 1rem;
  }
  .section_career-intro .career-intro_stat-value {
    font-size: 2rem;
    line-height: 1.4;
  }
  .section_career-intro .career-intro_slide {
    max-width: calc(100% - 3rem);
    height: 24rem;
  }
  .section_career-intro .career-intro_nav {
    width: 2.75rem;
    height: 2.75rem;
  }
  .section_career-intro .career-intro_nav.is-prev {
    left: 0.75rem;
  }
  .section_career-intro .career-intro_nav.is-next {
    right: 0.75rem;
  }
  .section_career-intro .career-intro_nav .icon-svg {
    width: 1.125rem;
    height: 1.125rem;
  }
}
@media (max-width: 479px) {
  .section_career-intro .career-intro_slide {
    height: 20rem;
  }
}

/* --- Karriere Tabs (Figma 10761-7322) --- */
.section_career-tabs .career-tabs_inner {
  overflow: hidden;
  background-color: var(--color--dark);
  color: var(--color--white);
}
.section_career-tabs .career-tabs_bar {
  position: absolute;
  top: 3.6875rem;
  left: 50%;
  z-index: 2;
  display: flex;
  gap: 0.625rem;
  max-width: calc(100% - 2.5rem);
  padding: 0.25rem;
  border-radius: var(--radius--pill);
  background-color: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(0.3125rem);
  backdrop-filter: blur(0.3125rem);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.08);
  transform: translateX(-50%);
  overflow-x: auto;
  scrollbar-width: none;
}
.section_career-tabs .career-tabs_bar[hidden] {
  display: none;
}
.section_career-tabs .career-tabs_bar::-webkit-scrollbar {
  display: none;
}
.section_career-tabs .career-tabs_tab {
  flex: none;
  padding: 0.75rem 2.125rem;
  border: 0;
  border-radius: var(--radius--pill);
  background: transparent;
  color: var(--color--white);
  font-family: inherit;
  font-size: var(--font-size--link-2);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition--fast), color var(--transition--fast);
}
.section_career-tabs .career-tabs_tab.is-active {
  background-color: var(--color--white);
  color: var(--color--dark);
}
.section_career-tabs .career-tabs_tab:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.125rem;
}
@media (hover: hover) {
  .section_career-tabs .career-tabs_tab:not(.is-active):hover {
    background-color: rgba(255, 255, 255, 0.16);
  }
}
.section_career-tabs .career-tabs_panels {
  display: grid;
}
.section_career-tabs .career-tabs_panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  grid-area: 1 / 1;
  min-height: 47.4375rem;
}
.section_career-tabs .career-tabs_panel[hidden] {
  display: none;
}
.section_career-tabs:not(.is-ready) .career-tabs_panel + .career-tabs_panel {
  display: none;
}
.section_career-tabs .career-tabs_panel.is-active {
  animation: career-tabs-fade 400ms ease;
}
@keyframes career-tabs-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.section_career-tabs .career-tabs_bg {
  position: absolute;
  inset: 0;
}
.section_career-tabs .career-tabs_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_career-tabs .career-tabs_shade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(11, 1, 14, 0.25) 1%, rgba(11, 1, 14, 0.21) 42%, rgba(11, 1, 14, 0.15) 65%), linear-gradient(180deg, rgba(6, 23, 1, 0) 54%, rgba(6, 23, 1, 0.28) 68%, rgba(6, 23, 1, 0.5) 100%);
}
.section_career-tabs .career-tabs_content-wrap {
  position: relative;
  padding-bottom: 4.625rem;
}
.section_career-tabs .career-tabs_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 33.6875rem;
  margin: 0 auto;
  text-align: center;
}
.section_career-tabs .career-tabs_label {
  display: none;
}
.section_career-tabs .career-tabs_eyebrow {
  margin: 0;
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
.section_career-tabs .career-tabs_title {
  margin: 0;
  font-size: var(--font-size--h2);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}
.section_career-tabs .career-tabs_text {
  margin: 0;
  font-size: var(--font-size--body);
  line-height: 1.7;
}
@media (prefers-reduced-motion: reduce) {
  .section_career-tabs .career-tabs_panel.is-active {
    animation: none;
  }
}
@media (max-width: 767px) {
  .section_career-tabs .career-tabs_bar {
    top: 1.5rem;
  }
  .section_career-tabs .career-tabs_tab {
    padding: 0.625rem 1.25rem;
  }
  .section_career-tabs .career-tabs_panel {
    min-height: 34rem;
  }
  .section_career-tabs .career-tabs_content-wrap {
    padding-bottom: 2.5rem;
  }
  .section_career-tabs .career-tabs_content {
    gap: 0.875rem;
  }
}

/* --- Karriere Werte (Figma 10761-7336) --- */
.section_career-values .section_inner {
  overflow: hidden;
}
.section_career-values .career-values_head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 39.6875rem;
  margin-bottom: 3.75rem;
}
.section_career-values .career-values_eyebrow {
  margin: 0;
  color: var(--section-eyebrow, #656d63);
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
.section_career-values .career-values_title {
  margin: 0;
  color: var(--section-fg, var(--color--dark));
  font-size: var(--font-size--h2);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}
.section_career-values .career-values_swiper {
  overflow: visible;
}
.section_career-values .career-values_slide {
  width: 26rem;
  height: auto;
}
.section_career-values .career-values_card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 35.375rem;
  overflow: hidden;
  padding: 0 3.25rem 3.125rem;
  border-radius: var(--radius--medium);
  background-color: #e8e8e8;
  color: var(--color--white);
  text-align: center;
}
.section_career-values .career-values_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_career-values .career-values_shade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(5, 5, 5, 0.27) 17%, rgba(52, 52, 52, 0) 54%, rgba(9, 9, 9, 0.37) 77%, rgba(0, 0, 0, 0.45) 100%);
}
.section_career-values .career-values_script {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  padding-top: 2.3rem;
  font-family: var(--font--script);
  font-size: 2rem;
  line-height: 1.66;
  letter-spacing: 0.002em;
  opacity: 0.8;
  white-space: nowrap;
  transform: translateX(-50%);
}
.section_career-values .career-values_script::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 7.5rem;
  height: 6.25rem;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(0.4375rem);
  backdrop-filter: blur(0.4375rem);
}
.section_career-values .career-values_body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.section_career-values .career-values_card-title {
  margin: 0;
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: var(--tracking--h4);
}
.section_career-values .career-values_card-text {
  margin: 0;
  font-size: var(--font-size--body-2);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
}
@media (max-width: 767px) {
  .section_career-values .career-values_head {
    margin-bottom: 2rem;
  }
  .section_career-values .career-values_slide {
    width: 18.5rem;
  }
  .section_career-values .career-values_card {
    height: 26rem;
    padding: 0 1.5rem 2rem;
  }
  .section_career-values .career-values_script {
    font-size: 1.625rem;
  }
}

/* --- Karriere Benefits (Figma 10761-7389) --- */
.section_career-benefits .career-benefits_head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 39.6875rem;
  margin-bottom: 5rem;
}
.section_career-benefits .career-benefits_eyebrow {
  margin: 0;
  color: var(--section-eyebrow, #656d63);
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
.section_career-benefits .career-benefits_title {
  margin: 0;
  color: var(--section-fg, var(--color--dark));
  font-size: var(--font-size--h2);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}
.section_career-benefits .career-benefits_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 20.8333rem));
  justify-content: space-between;
  gap: 5rem 3rem;
}
.section_career-benefits .career-benefits_item {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}
.section_career-benefits .career-benefits_icon {
  display: block;
  width: auto;
  height: 4.0625rem;
  max-width: 6rem;
  object-fit: contain;
  object-position: left center;
}
.section_career-benefits .career-benefits_body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.section_career-benefits .career-benefits_item-title {
  margin: 0;
  color: var(--section-fg, var(--color--dark));
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: var(--tracking--h4);
}
.section_career-benefits .career-benefits_item-text {
  margin: 0;
  color: #656d63;
  font-size: var(--font-size--body);
  line-height: 1.7;
}
@media (max-width: 991px) {
  .section_career-benefits .career-benefits_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .section_career-benefits .career-benefits_head {
    margin-bottom: 2.5rem;
  }
  .section_career-benefits .career-benefits_grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .section_career-benefits .career-benefits_item {
    gap: 1.25rem;
  }
  .section_career-benefits .career-benefits_icon {
    height: 3.25rem;
  }
}

/* Wortabstand zwischen Einstellungs-Text und Stellentitel/Link
   (der Builder entfernt reine Leerzeichen zwischen Inline-Elementen) */
.section_job-apply .job-apply_word,
.section_job-banner .job-banner_word {
  margin-right: 0.28em;
}

/* 143. Über uns (Figma 10761-7769) */

/* --- Gemeinsam: Section-Kopf zentriert, 36rem breit (Werte, Standorte) --- */
.about-values_head,
.about-map_head {
  margin-bottom: 0;
}
.about-values_head .section-head_content,
.about-map_head .section-head_content {
  gap: var(--space--24);
  max-width: 36rem;
}
.about-values_head .section-head_content > .u-text-width.is-heading,
.about-map_head .section-head_content > .u-text-width.is-heading {
  margin-top: -0.25rem;
}
.about-values_text,
.about-map_text {
  max-width: none;
  color: #656d63;
  font-size: var(--font-size--body);
  line-height: 1.7;
}
.about-map_text {
  max-width: 29.875rem;
  margin-left: auto;
  margin-right: auto;
}

/* =============================================================
   Hero mit Sprungmarken (Figma 10761-7851)
   ============================================================= */
.section_about-hero {
  position: relative;
}
.about-hero_inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.about-hero_bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--color--dark);
}
.about-hero_overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(181deg, rgba(32, 2, 40, 0.41) 1%, rgba(32, 2, 40, 0.35) 42%, rgba(32, 2, 40, 0.25) 66%),
    linear-gradient(180deg, rgba(35, 46, 32, 0) 54%, rgba(35, 46, 32, 0.17) 68%, rgba(35, 46, 32, 0.3) 100%);
}
.about-hero_content-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--hero-min-height, 46rem);
  padding-top: calc(var(--nav--topbar-height) + 8rem);
}
.about-hero_content-wrap > div {
  width: 100%;
}
.about-hero_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 43rem;
  color: var(--color--white);
}
.about-hero_eyebrow {
  font-size: var(--font-size--h5);
  line-height: 1.2;
  letter-spacing: var(--tracking--subline);
}
.about-hero_heading {
  margin-top: var(--space--24);
  font-size: var(--font-size--h1);
  line-height: 1;
  letter-spacing: var(--tracking--heading);
  color: var(--color--white);
}
.about-hero_nav {
  margin-top: var(--space--40);
}
.about-hero_anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
}
.about-hero_anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9375rem 1.5625rem 0.8125rem;
  border-radius: var(--radius--pill);
  background-color: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(0.3125rem);
  backdrop-filter: blur(0.3125rem);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.08);
  color: var(--color--white);
  font-size: var(--font-size--h5);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--subline);
  white-space: nowrap;
  transition: background-color var(--transition--fast);
}
@media (hover: hover) {
  .about-hero_anchor:hover {
    background-color: rgba(255, 255, 255, 0.38);
    color: var(--color--white);
  }
}
.about-hero_anchor:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.125rem;
}
/* Sprungziele nicht unter dem Header verstecken */
.about-values_inner[id],
.certificates_inner[id],
.milestones_inner[id],
.team_inner[id],
.about-map_inner[id] {
  scroll-margin-top: calc(var(--nav--topbar-height) + var(--nav--height));
}
@media (prefers-reduced-motion: no-preference) {
  html:has(.section_about-hero) {
    scroll-behavior: smooth;
  }
}

/* =============================================================
   Unsere Werte (Figma 10761-7874)
   ============================================================= */
.about-values_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space--16);
  margin-top: var(--space--80);
}
.about-values_card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 35.375rem;
  overflow: hidden;
  border-radius: var(--radius--medium);
  background-color: #e8e8e8;
  color: var(--color--white);
  text-align: center;
}
.about-values_media,
.about-values_overlay {
  position: absolute;
  inset: 0;
}
.about-values_media img,
.about-values_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-values_overlay {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(5, 5, 5, 0.54) 20%, rgba(52, 52, 52, 0) 51%, rgba(9, 9, 9, 0.49) 68%, rgba(0, 0, 0, 0.6) 100%);
}
.about-values_label {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 6.25rem;
}
.about-values_label-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 7.4375rem;
  height: 6.25rem;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.21);
}
.about-values_script {
  position: relative;
  margin-bottom: 0.625rem;
  font-size: var(--font-size--script-h3);
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0.8;
}
.about-values_body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--20);
  width: 100%;
  max-width: 19.5rem;
  margin: 0 auto;
  padding: var(--space--24) 0 3.125rem;
}
.about-values_title {
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: var(--tracking--h4);
  color: var(--color--white);
}
.about-values_card-text {
  font-size: var(--font-size--body-3);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
  color: var(--color--white);
}

/* =============================================================
   Weltkarte + Kennzahlen (Figma 10761-7906)
   ============================================================= */
.about-map_figure {
  position: relative;
  width: 100%;
  max-width: 68.5rem;
  margin: var(--space--100) auto 0;
}
.about-map_img {
  display: block;
  width: 100%;
  height: auto;
}
.about-map_pin {
  position: absolute;
  width: 3.3125rem;
  transform: translate(-50%, -96%);
  filter: drop-shadow(0 0.125rem 0.0625rem rgba(0, 0, 0, 0.19));
  pointer-events: none;
}
.about-map_pin-svg {
  display: block;
  width: 100%;
  height: auto;
}
.about-map_stats {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin-top: var(--space--100);
  padding: 0 var(--space--40);
}
.about-map_stat {
  display: flex;
  flex-direction: column;
  gap: 3.25rem;
  padding: 0 2.4375rem;
}
.about-map_stat:first-child {
  padding-left: 0;
}
.about-map_stat:last-child {
  padding-right: 0;
}
.about-map_stat + .about-map_stat {
  border-left: 0.0625rem solid rgba(217, 217, 217, 0.4);
}
.about-map_stat-value {
  font-size: 2.75rem;
  line-height: 1.66;
  color: var(--color--dark);
  white-space: nowrap;
}
.about-map_stat-text {
  max-width: 18.5rem;
  font-size: var(--font-size--body-2);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
  color: var(--color--dark);
}

/* =============================================================
   Zertifikate: Variante Slider (Figma 10761-9629)
   Nur mit Setting "Darstellung = Slider"; Raster bleibt unverändert.
   ============================================================= */
.certificates_inner:not(.is-layout-slider) .certificates_nav {
  display: none;
}
.certificates_inner.is-layout-slider {
  overflow: hidden;
}
.is-layout-slider .certificates_layout {
  display: flex;
  align-items: stretch;
  gap: var(--space--100);
}
.is-layout-slider .certificates_head {
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space--100);
  width: 18.0625rem;
  margin-bottom: 0;
}
.is-layout-slider .certificates_head .section-head_eyebrow {
  font-size: var(--font-size--h5);
  letter-spacing: var(--tracking--subline);
}
.is-layout-slider .certificates_nav .swiper-button-lock {
  display: none;
}
.is-layout-slider .certificates_track {
  flex: 1;
  min-width: 0;
  /* links bündig abschneiden, rechts bis zum Viewport-Rand laufen lassen */
  clip-path: inset(-5rem -100vw -5rem 0);
}
.is-layout-slider .certificates_grid {
  display: flex;
  gap: 0;
}
.is-layout-slider .certificates_item {
  flex: none;
  width: 23.6875rem;
  height: auto;
}
.is-layout-slider .certificates_grid:not(.swiper-wrapper) .certificates_item + .certificates_item {
  margin-left: var(--space--16);
}
.is-layout-slider .certificate-card {
  justify-content: flex-start;
  gap: 0;
  min-height: 22.4375rem;
  padding: 0;
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
}
.is-layout-slider .certificate-card_media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 9.4375rem;
  padding-top: 1.25rem;
}
.is-layout-slider .certificate-card_img {
  width: auto;
  max-width: 9.3125rem;
  height: auto;
  max-height: 7.3125rem;
  object-fit: contain;
}
.is-layout-slider .certificate-card_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--8);
  padding: 1.875rem 3.75rem 2.625rem;
}
.is-layout-slider .certificate-card_title {
  font-size: var(--font-size--h4);
  line-height: 1.1;
  letter-spacing: var(--tracking--h4);
}
.is-layout-slider .certificate-card_text {
  font-size: var(--font-size--body-2);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
  color: #656d63;
}

/* =============================================================
   Markenwelt: Variante Tabs (Figma 10761-9667)
   Nur mit Setting "Darstellung = Tabs"; Startseite (Links) bleibt.
   ============================================================= */
.brand-world_tabs,
.is-layout-links .brand-world_panel {
  display: none;
}
.brand-world_panel[hidden] {
  display: none !important;
}
.is-layout-tabs .brand-world_text,
.is-layout-tabs .brand-world_link {
  display: none;
}
.brand-world_inner.is-layout-tabs {
  min-height: 56.25rem;
}
.is-layout-tabs .brand-world_content {
  flex: 1;
  margin-bottom: 0;
}
.is-layout-tabs .brand-world_content > .text-style-eyebrow {
  font-size: var(--font-size--h6);
  letter-spacing: 0;
}
.is-layout-tabs .brand-world_tabs {
  display: inline-flex;
  align-self: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 2.25rem;
  padding: var(--space--4);
  border-radius: var(--radius--pill);
  background-color: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(0.3125rem);
  backdrop-filter: blur(0.3125rem);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.08);
}
.is-layout-tabs .brand-world_tabs:empty {
  display: none;
}
.brand-world_tab {
  padding: 0.75rem 2.125rem;
  border-radius: var(--radius--pill);
  background-color: transparent;
  color: var(--color--white);
  font-size: var(--font-size--link-2);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition--fast), color var(--transition--fast);
}
.brand-world_tab.is-active {
  background-color: var(--color--white);
  color: var(--color--dark);
}
@media (hover: hover) {
  .brand-world_tab:not(.is-active):hover {
    background-color: rgba(255, 255, 255, 0.16);
  }
}
.brand-world_tab:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.125rem;
}
.is-layout-tabs .brand-world_links {
  display: block;
  margin-top: auto;
  padding-top: var(--space--64);
}
.is-layout-tabs .brand-world_link-item {
  display: block;
}
.is-layout-tabs .brand-world_panel {
  display: flex;
  justify-content: center;
}
.is-layout-tabs .brand-world_panel:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.5rem;
}
.brand-world_panel-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--20);
  max-width: 33.6875rem;
  color: var(--color--white);
  text-align: center;
}
.brand-world_panel-eyebrow {
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
.brand-world_panel-heading {
  font-size: var(--font-size--h2);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
  color: var(--color--white);
}
.brand-world_panel-text {
  font-size: var(--font-size--body);
  line-height: 1.7;
  color: var(--color--white);
}
.brand-world_panel-button {
  margin-top: 1.0625rem;
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}
.brand-world_panel-icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
}
.brand-world_panel-icon .icon-svg {
  width: 100%;
  height: 100%;
}
/* Tab-Hintergründe: per Skript in .brand-world_bg verschoben */
.brand-world_bg > .brand-world_panel-media {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.brand-world_bg > .brand-world_panel-media.is-active {
  opacity: 1;
}

/* =============================================================
   Meilensteine: Slider + Zeitleiste (Figma 10761-9706)
   ============================================================= */
.milestones_inner {
  overflow-x: clip;
}
.milestones_head {
  margin-bottom: var(--space--40);
}
.milestones_head .section-head_content {
  max-width: 39.6875rem;
}
.milestones-slider {
  position: relative;
  max-width: 75.625rem;
}
.section_milestones .milestones-slider_track {
  overflow: hidden;
  margin: -2.5rem;
  padding: 2.5rem;
}
.milestones-slider_list {
  display: flex;
}
.milestones-slider_slide {
  display: grid;
  flex: none;
  grid-template-columns: minmax(0, 650fr) minmax(0, 439fr);
  align-items: stretch;
  column-gap: 7.5625rem;
  width: 100%;
  height: auto;
}
.milestones-slider_media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34.375rem;
  padding: 4.5rem 5.375rem;
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 1.9rem rgba(0, 0, 0, 0.06);
}
.milestones-slider_media .li-guard {
  display: contents;
}
.milestones-slider_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.milestones-slider_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6.4375rem;
  padding-bottom: 5rem;
}
.milestones-slider_badge {
  display: inline-flex;
  padding: 0.375rem 1.25rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--red);
  color: var(--color--white);
  font-size: var(--font-size--h5);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--subline);
}
.milestones-slider_copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--12);
}
.milestones-slider_title {
  font-size: var(--font-size--h2);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}
.milestones-slider_text {
  font-size: var(--font-size--body);
  line-height: 1.7;
  color: #656d63;
}
.milestones-slider_text a {
  color: var(--color--dark);
  font-weight: 600;
  text-decoration: underline;
}
.milestones-slider_more {
  display: inline-flex;
  align-items: center;
  gap: var(--space--4);
  color: var(--color--dark);
  font-size: var(--font-size--link);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--tracking--link);
}
.milestones-slider_more-icon {
  display: inline-flex;
  width: 0.625rem;
  height: 0.625rem;
}
.milestones-slider_more-icon .icon-svg {
  width: 100%;
  height: 100%;
}
@media (hover: hover) {
  .milestones-slider_more:hover {
    text-decoration: underline;
  }
}
/* Pfeile unten in der Textspalte */
.milestones-slider_nav {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: calc((100% - 7.5625rem) * 0.5969 + 7.5625rem);
}
.milestones-slider_nav .swiper-button-lock {
  display: none;
}
.milestones-slider_timeline {
  position: relative;
  margin-top: 5.375rem;
  padding-top: var(--space--24);
}
.milestones-slider_timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 0.0625rem;
  transform: translateX(-50%);
  background-color: rgba(35, 46, 32, 0.2);
}
.milestones-slider_years {
  position: relative;
  display: flex;
  gap: 13.125rem;
  margin: 0;
  padding: 0 0 var(--space--8);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.milestones-slider_years::-webkit-scrollbar {
  display: none;
}
.milestones-slider_year-item {
  flex: none;
  min-width: 7.3125rem;
}
.milestones-slider_year {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  background: none;
  text-align: left;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity var(--transition--fast);
}
.milestones-slider_year.is-active {
  opacity: 1;
}
@media (hover: hover) {
  .milestones-slider_year:not(.is-active):hover {
    opacity: 0.7;
  }
}
.milestones-slider_year:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.25rem;
}
.milestones-slider_year-num {
  font-family: var(--font--script);
  font-size: 3rem;
  line-height: 1.66;
  letter-spacing: var(--tracking--script);
  color: var(--color--dark);
}
.milestones-slider_year-label {
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  color: #656d63;
  white-space: nowrap;
}

/* =============================================================
   Team / Geschäftsführung (Figma 10761-9752)
   ============================================================= */
.team_head {
  margin-bottom: var(--space--40);
}
.team_head .section-head_content {
  max-width: 36rem;
}
.team_cards {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr));
  gap: var(--space--16);
}
.team-card {
  display: flex;
  flex-direction: column;
  min-height: 37.4375rem;
  padding: var(--space--8);
  overflow: hidden;
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
}
.team-card_media {
  flex: none;
  height: 24.375rem;
  overflow: hidden;
  border-radius: var(--radius--medium);
  background-color: var(--color--grey);
  transition: height 0.35s ease;
}
.team-card_media .li-guard {
  display: contents;
}
.team-card_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.team-card_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--20);
  width: 100%;
  max-width: 19.5625rem;
  margin: 0 auto;
  padding: 3rem 0 var(--space--32);
  text-align: center;
  transition: padding 0.35s ease;
}
.team-card_name {
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: var(--tracking--h4);
}
.team-card_text {
  font-size: var(--font-size--body-2);
  line-height: 1.5;
  letter-spacing: var(--tracking--link);
  color: #656d63;
}
.team-card_action {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
}
.team-card_button {
  width: 100%;
  min-height: 3.25rem;
}
/* Karten mit Link: Bild ist kleiner, Button sichtbar (Touch).
   Mit Maus: Button erscheint beim Hover/Fokus (Figma-Hover-Zustand). */
.team-card.has-link .team-card_media {
  height: 19.625rem;
}
.team-card.has-link .team-card_body {
  padding-top: 2.75rem;
}
@media (hover: hover) {
  .team-card.has-link .team-card_media {
    height: 24.375rem;
  }
  .team-card.has-link .team-card_body {
    padding-top: 3rem;
  }
  .team-card.has-link .team-card_action {
    max-height: 0;
    margin-top: -1.25rem;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;
  }
  .team-card.has-link:hover .team-card_media,
  .team-card.has-link:focus-within .team-card_media {
    height: 19.625rem;
  }
  .team-card.has-link:hover .team-card_body,
  .team-card.has-link:focus-within .team-card_body {
    padding-top: 2.75rem;
  }
  .team-card.has-link:hover .team-card_action,
  .team-card.has-link:focus-within .team-card_action {
    max-height: 4rem;
    margin-top: 0.5rem;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .team-card_media,
  .team-card_body,
  .team-card_action {
    transition: none !important;
  }
}

/* =============================================================
   Karriere-Teaser (Figma 10761-7769, "Werde Teil von etwas Größerem")
   ============================================================= */
.section_career-banner {
  position: relative;
}
.career-banner_inner {
  display: flex;
  min-height: var(--banner-min-height, 34rem);
  overflow: hidden;
}
.career-banner_bg {
  position: absolute;
  inset: 0;
  background-color: var(--color--dark);
}
.career-banner_overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(35, 46, 32, 0.72) 0%, rgba(35, 46, 32, 0.45) 38%, rgba(35, 46, 32, 0) 70%),
    linear-gradient(180deg, rgba(35, 46, 32, 0) 50%, rgba(35, 46, 32, 0.35) 100%);
}
.career-banner_container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space--48);
  width: 100%;
  margin-top: calc(-1 * var(--section-pt, 4rem));
}
.career-banner_label {
  position: relative;
  display: flex;
  align-items: flex-end;
  align-self: flex-start;
  min-height: 6.25rem;
  padding: 0 var(--space--8);
}
.career-banner_label-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 7.4375rem;
  height: 100%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.21);
}
.career-banner_script {
  position: relative;
  margin-bottom: 0.625rem;
  font-size: var(--font-size--script-h3);
  line-height: 1.2;
  color: var(--color--white);
  opacity: 0.8;
  white-space: nowrap;
}
.career-banner_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--16);
  max-width: 28rem;
  color: var(--color--white);
}
.career-banner_heading {
  color: var(--color--white);
}
.career-banner_text {
  font-size: var(--font-size--body);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}
.career-banner_content .button-group {
  margin-top: var(--space--16);
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 991px) {
  .about-values_grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
  }
  .about-values_card {
    min-height: 30rem;
  }
  .about-map_stats {
    padding: 0;
  }
  .about-map_stat {
    padding: 0 var(--space--24);
  }
  .is-layout-slider .certificates_layout {
    flex-direction: column;
    gap: var(--space--32);
  }
  .is-layout-slider .certificates_head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    gap: var(--space--24);
  }
  .is-layout-slider .certificates_track {
    clip-path: none;
    overflow: visible;
  }
  .milestones-slider_slide {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space--32);
  }
  .milestones-slider_media {
    height: 26rem;
    padding: var(--space--40);
  }
  .milestones-slider_body {
    gap: var(--space--24);
    padding-bottom: 4.5rem;
  }
  .milestones-slider_nav {
    left: 0;
  }
  .milestones-slider_timeline {
    margin-top: var(--space--48);
  }
  .milestones-slider_years {
    gap: var(--space--64);
  }
  .team_cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .brand-world_inner.is-layout-tabs {
    min-height: 48rem;
  }
}

@media (max-width: 767px) {
  .about-hero_content-wrap {
    min-height: min(var(--hero-min-height, 46rem), 38rem);
    padding-top: calc(var(--nav--topbar-height) + 7rem);
  }
  .about-hero_heading {
    margin-top: var(--space--16);
  }
  .about-hero_nav {
    margin-top: var(--space--28);
  }
  .about-hero_anchors {
    gap: var(--space--8);
  }
  .about-hero_anchor {
    padding: 0.6875rem 1.125rem 0.5625rem;
    font-size: var(--font-size--body);
  }
  .about-values_grid {
    margin-top: var(--space--40);
  }
  .about-values_card {
    min-height: 28rem;
  }
  .about-values_script {
    font-size: var(--font-size--script-h2);
  }
  .about-map_figure {
    margin-top: var(--space--48);
  }
  .about-map_pin {
    width: 1.75rem;
  }
  .about-map_stats {
    grid-auto-flow: row;
    margin-top: var(--space--48);
  }
  .about-map_stat,
  .about-map_stat:first-child,
  .about-map_stat:last-child {
    gap: var(--space--12);
    padding: var(--space--24) 0;
  }
  .about-map_stat + .about-map_stat {
    border-left: 0;
    border-top: 0.0625rem solid rgba(35, 46, 32, 0.12);
  }
  .about-map_stat-value {
    font-size: 2.25rem;
  }
  .is-layout-slider .certificates_head {
    flex-direction: column;
    align-items: flex-start;
  }
  .is-layout-slider .certificates_item {
    width: 17.5rem;
  }
  .is-layout-slider .certificate-card {
    min-height: 20rem;
  }
  .is-layout-slider .certificate-card_body {
    padding: var(--space--24) var(--space--24) var(--space--32);
  }
  .is-layout-tabs .brand-world_tabs {
    gap: var(--space--4);
    border-radius: var(--radius--large);
  }
  .brand-world_tab {
    padding: 0.625rem 1rem;
  }
  .brand-world_inner.is-layout-tabs {
    min-height: 44rem;
  }
  .brand-world_panel-button {
    width: 100%;
    padding-left: var(--space--24);
    padding-right: var(--space--24);
  }
  .section_milestones .milestones-slider_track {
    margin: -1rem;
    padding: 1rem;
  }
  .milestones-slider_media {
    height: 18rem;
    padding: var(--space--24);
  }
  .milestones-slider_badge {
    font-size: var(--font-size--h6);
  }
  .milestones-slider_year-num {
    font-size: 2.25rem;
  }
  .milestones-slider_years {
    gap: var(--space--40);
  }
  .team_cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
  }
  .team-card {
    min-height: 0;
  }
  .team-card_media,
  .team-card.has-link .team-card_media {
    height: auto;
    aspect-ratio: 4 / 5;
  }
  .team-card_body,
  .team-card.has-link .team-card_body {
    padding: var(--space--24) var(--space--8) var(--space--24);
  }
  .career-banner_inner {
    min-height: 32rem;
  }
  .career-banner_overlay {
    background-image: linear-gradient(180deg, rgba(35, 46, 32, 0.2) 0%, rgba(35, 46, 32, 0.75) 70%);
  }
  .career-banner_container {
    margin-top: calc(-1 * var(--section-pt-m, 3rem));
  }
  .career-banner_content .button-group,
  .career-banner_content .button {
    width: 100%;
  }
}

@media (max-width: 479px) {
  .about-hero_anchor {
    font-size: var(--font-size--body-2);
  }
  .about-values_card {
    min-height: 26rem;
  }
  .brand-world_tab {
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size--link-3);
  }
}

/* 144. Rubriken (Figma 10761-13821 / 10925-20728 / 10761-14082) */

/* ---------- Karten-Raster (Rubriken Uebersicht / Rubrik Themen / Rubrik Beitraege) ---------- */
.section_guide-index .guide-grid_head,
.section_guide-topics .guide-grid_head,
.section_guide-posts .guide-grid_head {
  margin-bottom: 2.5rem;
}
.section_guide-index .guide-grid_heading,
.section_guide-topics .guide-grid_heading,
.section_guide-posts .guide-grid_heading {
  margin: 0;
  font-size: var(--font-size--h3);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--color--dark);
}
.section_guide-index .guide-grid,
.section_guide-topics .guide-grid,
.section_guide-posts .guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.section_guide-index .guide-card,
.section_guide-topics .guide-card,
.section_guide-posts .guide-card {
  display: flex;
  min-width: 0;
  background-color: var(--color--white);
  border-radius: 0.625rem;
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.section_guide-index .guide-card_link,
.section_guide-topics .guide-card_link,
.section_guide-posts .guide-card_link {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.5rem;
  color: inherit;
  text-decoration: none;
  border-radius: 0.625rem;
}
.section_guide-index .guide-card_link:focus-visible,
.section_guide-topics .guide-card_link:focus-visible,
.section_guide-posts .guide-card_link:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: -0.125rem;
}
.section_guide-index .guide-card_media,
.section_guide-topics .guide-card_media,
.section_guide-posts .guide-card_media {
  position: relative;
  aspect-ratio: 616 / 297;
  border-radius: 0.625rem;
  overflow: hidden;
  background-color: #3f1010;
}
.section_guide-index .guide-card_img,
.section_guide-topics .guide-card_img,
.section_guide-posts .guide-card_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.section_guide-index .guide-card_label,
.section_guide-topics .guide-card_label,
.section_guide-posts .guide-card_label {
  position: absolute;
  top: 0;
  left: 2.25rem;
  padding: 2.6875rem 0 0 0.875rem;
  pointer-events: none;
}
.section_guide-index .guide-card_label-bg,
.section_guide-topics .guide-card_label-bg,
.section_guide-posts .guide-card_label-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 8.5625rem;
  height: 6.125rem;
  background-color: rgba(255, 255, 255, 0.21);
}
.section_guide-index .guide-card_script,
.section_guide-topics .guide-card_script,
.section_guide-posts .guide-card_script {
  position: relative;
  display: block;
  font-size: 1.75rem;
  line-height: 1.66;
  color: var(--color--white);
  white-space: nowrap;
}
.section_guide-index .guide-card_body,
.section_guide-topics .guide-card_body,
.section_guide-posts .guide-card_body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  max-width: 26.25rem;
  padding: 3.125rem 2.25rem 3.5rem;
}
.section_guide-index .guide-card_title,
.section_guide-topics .guide-card_title,
.section_guide-posts .guide-card_title {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--color--dark);
  transition: color 0.2s ease;
}
.section_guide-index .guide-card_text,
.section_guide-topics .guide-card_text,
.section_guide-posts .guide-card_text {
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #656d63;
}
.section_guide-index .guide-card_text p,
.section_guide-topics .guide-card_text p,
.section_guide-posts .guide-card_text p {
  margin: 0;
}
@media (hover: hover) {
  .section_guide-index .guide-card_link:hover .guide-card_img,
  .section_guide-topics .guide-card_link:hover .guide-card_img,
  .section_guide-posts .guide-card_link:hover .guide-card_img {
    transform: scale(1.04);
  }
  .section_guide-index .guide-card_link:hover .guide-card_title,
  .section_guide-topics .guide-card_link:hover .guide-card_title,
  .section_guide-posts .guide-card_link:hover .guide-card_title {
    color: var(--color--red);
  }
}

/* ---------- Rubrik Hero ---------- */
.section_guide-hero {
  position: relative;
}
.section_guide-hero .guide-hero_inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.section_guide-hero .guide-hero_bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--color--dark);
  background-image: linear-gradient(150deg, var(--color--green-dark) 0%, var(--color--dark) 65%);
}
.section_guide-hero .guide-hero_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_guide-hero .guide-hero_overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.35) 100%);
}
.section_guide-hero .guide-hero_content-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--hero-min-height, 37rem);
  padding-top: calc(var(--nav--topbar-height, 2.125rem) + 7rem);
  padding-bottom: 3.75rem;
}
.section_guide-hero .guide-hero_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  color: var(--color--white);
}
.section_guide-hero .guide-hero_titles {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 39rem;
}
.section_guide-hero .guide-hero_eyebrow {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color--white);
}
.section_guide-hero .guide-hero_title {
  margin: 0;
  font-size: var(--font-size--h1);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color--white);
}
.section_guide-hero .guide-hero_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
}
.section_guide-hero .guide-hero_chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9375rem 1.5625rem 0.8125rem;
  border-radius: var(--radius--pill);
  background-color: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.08);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color--white);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.section_guide-hero .guide-hero_chip:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.125rem;
}
@media (hover: hover) {
  .section_guide-hero .guide-hero_chip:hover {
    background-color: rgba(255, 255, 255, 0.38);
  }
}

/* ---------- Rubrik Intro ---------- */
.section_guide-intro .guide-intro_panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.3125rem;
  padding: 3.375rem 7.5rem 4.375rem;
  border-radius: 0.625rem;
  background-image: linear-gradient(178deg, #f7f7f7 2%, #ffffff 61%, #f7f7f7 116%);
}
.section_guide-intro .guide-intro_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.375rem;
  max-width: 42.125rem;
  text-align: center;
}
.section_guide-intro .guide-intro_titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}
.section_guide-intro .guide-intro_script {
  margin: 0;
  font-size: 2.75rem;
  line-height: 1.66;
  color: var(--color--dark);
}
.section_guide-intro .guide-intro_subline {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color--dark);
  opacity: 0.7;
}
.section_guide-intro .guide-intro_text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color--dark);
}
.section_guide-intro .guide-intro_text p {
  margin: 0;
}
.section_guide-intro .guide-intro_gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
}
.section_guide-intro .guide-intro_gallery:empty {
  display: none;
}
.section_guide-intro .guide-intro_img-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 0.625rem;
  overflow: hidden;
  background-color: var(--color--grey-dark);
}
.section_guide-intro .guide-intro_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Rubrik Produkte (Split mit Bild) ---------- */
.section_guide-products {
  --gp-gutter: var(--space--80);
}
.section_guide-products .guide-products_inner {
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  background-image: linear-gradient(179deg, #f7f7f7 2%, #ffffff 61%, #f7f7f7 116%);
}
.section_guide-products .guide-products_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: var(--container--large);
  min-height: 50.375rem;
  margin-left: auto;
  margin-right: auto;
}
.section_guide-products .guide-products_content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 30.3125rem;
  padding-top: var(--section-pt, 7.2rem);
  padding-bottom: var(--section-pb, 7.2rem);
}
.section_guide-products .guide-products_copy,
.section_guide-products .guide-products_titles,
.section_guide-products .guide-products_list-wrap {
  display: flex;
  flex-direction: column;
}
.section_guide-products .guide-products_copy { gap: 1.5rem; }
.section_guide-products .guide-products_titles { gap: 0.75rem; }
.section_guide-products .guide-products_list-wrap { gap: 1rem; }
.section_guide-products .heading-style-h2 {
  margin: 0;
}
.section_guide-products .guide-products_text {
  max-width: 26.0625rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #656d63;
}
.section_guide-products .guide-products_text p { margin: 0; }
.section_guide-products .guide-products_label {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  color: var(--color--dark);
}
.section_guide-products .guide-products_list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.section_guide-products .guide-products_row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.3125rem 1.25rem 0.3125rem 0.3125rem;
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
  color: var(--color--dark);
  text-decoration: none;
}
.section_guide-products .guide-products_row:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
.section_guide-products .guide-products_thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 5.5625rem;
  height: 4.5rem;
}
.section_guide-products .guide-products_thumb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.section_guide-products .guide-products_name {
  flex: 1 1 auto;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
}
.section_guide-products .guide-products_arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background-color: var(--color--red);
  color: var(--color--white);
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}
.section_guide-products .guide-products_media {
  position: relative;
  min-height: 100%;
  margin-right: calc(-1 * var(--gp-gutter) - max(0px, (100vw - var(--container--large) - 2 * var(--gp-gutter)) / 2));
  overflow: hidden;
}
.section_guide-products .guide-products_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (hover: hover) {
  .section_guide-products .guide-products_row:hover .guide-products_arrow {
    background-color: var(--color--red-dark);
  }
  .section_guide-products .guide-products_row:hover .guide-products_name {
    color: var(--color--red);
  }
}

/* ---------- Rubrik Tabelle ---------- */
.section_guide-table .guide-table_head {
  margin-bottom: 2.5rem;
}
.section_guide-table .guide-table_intro {
  font-size: 1rem;
  line-height: 1.7;
  color: #656d63;
}
.section_guide-table .guide-table_intro p { margin: 0; }
.section_guide-table .guide-table_scroll {
  overflow-x: auto;
  border-radius: 0.625rem;
  -webkit-overflow-scrolling: touch;
}
.section_guide-table .guide-table_scroll:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
.section_guide-table .guide-table {
  width: 100%;
  min-width: 60rem;
  border-collapse: separate;
  border-spacing: 0.125rem;
  margin: -0.125rem;
  width: calc(100% + 0.25rem);
  table-layout: auto;
}
.section_guide-table .guide-table_th,
.section_guide-table .guide-table_td {
  padding: 1.25rem 2rem;
  text-align: left;
  vertical-align: middle;
}
.section_guide-table .guide-table_th {
  background-color: var(--color--red);
  color: var(--color--white);
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
.section_guide-table .guide-table_th a {
  color: inherit;
  text-decoration: underline;
}
.section_guide-table .guide-table_td {
  background-color: #f9f9f9;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color--dark);
}
.section_guide-table .guide-table_row:last-child .guide-table_td {
  vertical-align: top;
  padding-bottom: 2rem;
}
.section_guide-table .guide-table_th:nth-child(1),
.section_guide-table .guide-table_td:nth-child(1) { width: 8.125rem; }
.section_guide-table .guide-table_th:nth-child(2),
.section_guide-table .guide-table_td:nth-child(2) { width: 9.125rem; }
.section_guide-table .guide-table_th:nth-child(3),
.section_guide-table .guide-table_td:nth-child(3),
.section_guide-table .guide-table_th:nth-child(4),
.section_guide-table .guide-table_td:nth-child(4) { width: 15.75rem; }
.section_guide-table .guide-table_rt p,
.section_guide-table .guide-table_rt ul {
  margin: 0;
}
.section_guide-table .guide-table_rt ul {
  padding-left: 1.5rem;
  list-style: disc;
}
.section_guide-table .guide-table_td a {
  color: inherit;
  text-decoration: underline;
}
.section_guide-table .guide-table_note {
  margin-top: 2.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #656d63;
}
.section_guide-table .guide-table_note p { margin: 0; }
@media (hover: hover) {
  .section_guide-table .guide-table_th a:hover,
  .section_guide-table .guide-table_td a:hover {
    text-decoration-thickness: 0.125rem;
  }
}

/* ---------- Rubrik Vorteile ---------- */
.section_guide-benefits .guide-benefits_head {
  margin-bottom: 2.5rem;
}
.section_guide-benefits .guide-benefits_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section_guide-benefits .guide-benefits_card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 35.375rem;
  padding: 2rem 1.5rem 3.25rem;
  border-radius: 0.625rem;
  overflow: hidden;
  background-color: #e8e8e8;
  color: var(--color--white);
  text-align: center;
}
.section_guide-benefits .guide-benefits_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_guide-benefits .guide-benefits_overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(5, 5, 5, 0.36) 20%, rgba(52, 52, 52, 0) 51%, rgba(9, 9, 9, 0.33) 68%, rgba(0, 0, 0, 0.4) 100%);
}
.section_guide-benefits .guide-benefits_label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 2.3rem;
  white-space: nowrap;
}
.section_guide-benefits .guide-benefits_label-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 7.4625rem;
  height: 6.25rem;
  transform: translateX(-44%);
  background-color: rgba(255, 255, 255, 0.21);
}
.section_guide-benefits .guide-benefits_script {
  position: relative;
  font-size: var(--font-size--script-h3);
  line-height: 1.66;
  color: var(--color--white);
  opacity: 0.8;
}
.section_guide-benefits .guide-benefits_body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 19.5rem;
}
.section_guide-benefits .guide-benefits_title {
  margin: 0;
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--color--white);
}
.section_guide-benefits .guide-benefits_text {
  max-width: 16.25rem;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* ---------- Punkt-Listen (Varianten + Checkliste) ---------- */
.section_guide-variants .guide-dots ul,
.section_guide-check .guide-dots ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section_guide-variants .guide-dots li,
.section_guide-check .guide-dots li {
  position: relative;
  padding-left: 1.0625rem;
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 2.2;
  color: var(--color--dark);
}
.section_guide-variants .guide-dots li::before,
.section_guide-check .guide-dots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.0625rem;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: var(--color--red);
}
.section_guide-variants .guide-dots a,
.section_guide-check .guide-dots a {
  color: inherit;
  text-decoration: underline;
}
.section_guide-check .guide-dots ul {
  gap: 1rem;
}
.section_guide-check .guide-dots p {
  margin: 0;
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 2.2;
}

/* ---------- Rubrik Varianten (Slider) ---------- */
.section_guide-variants .guide-variants_head {
  margin-bottom: 2.5rem;
}
.section_guide-variants .guide-variants_swiper {
  overflow: visible;
}
.section_guide-variants .swiper-wrapper {
  display: flex;
}
.section_guide-variants .guide-variants_slide {
  flex-shrink: 0;
  width: 61.5rem;
  max-width: 100%;
  height: auto;
}
.section_guide-variants .guide-variants_card {
  display: grid;
  grid-template-columns: 32.6875rem minmax(0, 1fr);
  height: 100%;
  min-height: 36.25rem;
  background-color: var(--color--white);
  border-radius: 0.75rem;
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.section_guide-variants .guide-variants_content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 3.75rem 2.5rem 3.75rem 3.75rem;
}
.section_guide-variants .guide-variants_top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.section_guide-variants .guide-variants_badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.0625rem 0.975rem 0;
  background-color: #628859;
  color: var(--color--white);
  font-size: 0.9375rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.66;
  letter-spacing: 0.02em;
}
.section_guide-variants .guide-variants_copy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.section_guide-variants .guide-variants_title {
  margin: 0;
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--color--dark);
}
.section_guide-variants .guide-variants_text {
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #656d63;
}
.section_guide-variants .guide-variants_text p { margin: 0; }
.section_guide-variants .guide-variants_bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.section_guide-variants .guide-variants_label {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  color: #656d63;
}
.section_guide-variants .guide-variants_media {
  position: relative;
  margin: 0.5rem;
  border-radius: 0.625rem;
  overflow: hidden;
  background-color: var(--color--grey-dark);
}
.section_guide-variants .guide-variants_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_guide-variants .slider-nav {
  margin-top: 2.5rem;
}

/* ---------- Rubrik Checkliste ---------- */
.section_guide-check .guide-check_layout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
}
.section_guide-check .guide-check_intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.25rem;
  width: 30.3125rem;
  max-width: 100%;
}
.section_guide-check .guide-check_titles {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: -0.75rem;
}
.section_guide-check .heading-style-h2 { margin: 0; }
.section_guide-check .guide-check_text {
  max-width: 26.0625rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #656d63;
}
.section_guide-check .guide-check_text p { margin: 0; }
.section_guide-check .guide-check_button {
  padding: 1rem 3.5rem;
}
.section_guide-check .guide-check_boxes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 39.25rem;
  max-width: 100%;
}
.section_guide-check .guide-check_box {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 5rem;
  border-radius: 0.625rem;
  background-image: linear-gradient(178deg, #f7f7f7 2%, #ffffff 61%, #f7f7f7 116%);
}
.section_guide-check .guide-check_box-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.section_guide-check .guide-check_icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  color: var(--color--red);
}
.section_guide-check .guide-check_box-title {
  margin: 0;
  font-size: var(--font-size--h4);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--color--dark);
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .section_guide-index .guide-card_body,
  .section_guide-topics .guide-card_body,
  .section_guide-posts .guide-card_body {
    padding: 2.5rem 1.75rem 3rem;
  }
  .section_guide-intro .guide-intro_panel {
    padding: 3rem 3rem 3.5rem;
    gap: 3rem;
  }
  .section_guide-products { --gp-gutter: var(--space--40); }
  .section_guide-products .guide-products_content {
    padding-right: 2.5rem;
  }
  .section_guide-benefits .guide-benefits_card {
    min-height: 30rem;
  }
  .section_guide-variants .guide-variants_slide {
    width: 44rem;
  }
  .section_guide-variants .guide-variants_card {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .section_guide-check .guide-check_layout {
    flex-direction: column;
  }
  .section_guide-check .guide-check_intro,
  .section_guide-check .guide-check_boxes {
    width: 100%;
  }
  .section_guide-check .guide-check_box {
    padding: 3rem;
  }
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  .section_guide-index .guide-grid_head,
  .section_guide-topics .guide-grid_head,
  .section_guide-posts .guide-grid_head {
    margin-bottom: 1.5rem;
  }
  .section_guide-index .guide-grid,
  .section_guide-topics .guide-grid,
  .section_guide-posts .guide-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .section_guide-index .guide-card_media,
  .section_guide-topics .guide-card_media,
  .section_guide-posts .guide-card_media {
    aspect-ratio: 4 / 3;
  }
  .section_guide-index .guide-card_label,
  .section_guide-topics .guide-card_label,
  .section_guide-posts .guide-card_label {
    left: 1.25rem;
    padding-top: 2rem;
  }
  .section_guide-index .guide-card_label-bg,
  .section_guide-topics .guide-card_label-bg,
  .section_guide-posts .guide-card_label-bg {
    width: 7rem;
    height: 5rem;
  }
  .section_guide-index .guide-card_script,
  .section_guide-topics .guide-card_script,
  .section_guide-posts .guide-card_script {
    font-size: 1.5rem;
  }
  .section_guide-index .guide-card_body,
  .section_guide-topics .guide-card_body,
  .section_guide-posts .guide-card_body {
    gap: 0.75rem;
    padding: 1.75rem 1rem 2rem;
  }
  .section_guide-index .guide-card_title,
  .section_guide-topics .guide-card_title,
  .section_guide-posts .guide-card_title {
    font-size: 1.375rem;
  }

  .section_guide-hero .guide-hero_content-wrap {
    min-height: min(var(--hero-min-height, 37rem), 32rem);
    padding-top: calc(var(--nav--topbar-height, 2.125rem) + 6rem);
    padding-bottom: 2.5rem;
  }
  .section_guide-hero .guide-hero_content { gap: 1.75rem; }
  .section_guide-hero .guide-hero_titles { gap: 1rem; }
  .section_guide-hero .guide-hero_eyebrow { font-size: 1.0625rem; }
  .section_guide-hero .guide-hero_chip {
    padding: 0.6875rem 1.125rem 0.5625rem;
    font-size: 1rem;
  }

  .section_guide-intro .guide-intro_panel {
    padding: 2.5rem 1.25rem;
    gap: 2rem;
  }
  .section_guide-intro .guide-intro_head { gap: 1.5rem; }
  .section_guide-intro .guide-intro_script { font-size: 2.125rem; }
  .section_guide-intro .guide-intro_text { font-size: 0.9375rem; }
  .section_guide-intro .guide-intro_gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .section_guide-products .guide-products_layout {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .section_guide-products .guide-products_content {
    max-width: none;
    padding-right: 0;
    padding-top: var(--section-pt-m, 3rem);
    padding-bottom: 2rem;
    gap: 2rem;
  }
  .section_guide-products .guide-products_media {
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin-right: 0;
    margin-bottom: var(--section-pb-m, 3rem);
    border-radius: 0.625rem;
  }
  .section_guide-products .guide-products_thumb {
    width: 4.25rem;
    height: 3.75rem;
  }

  .section_guide-table .guide-table_head { margin-bottom: 1.5rem; }
  .section_guide-table .guide-table_th,
  .section_guide-table .guide-table_td {
    padding: 1rem 1.25rem;
  }
  .section_guide-table .guide-table_note { margin-top: 1.5rem; }

  .section_guide-benefits .guide-benefits_head { margin-bottom: 1.5rem; }
  .section_guide-benefits .guide-benefits_grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
  .section_guide-benefits .guide-benefits_card {
    min-height: 26rem;
    padding-bottom: 2.5rem;
  }
  .section_guide-benefits .guide-benefits_script { font-size: 1.625rem; }

  .section_guide-variants .guide-variants_head { margin-bottom: 1.5rem; }
  .section_guide-variants .guide-variants_slide { width: 85vw; }
  .section_guide-variants .guide-variants_card {
    display: flex;
    flex-direction: column-reverse;
    min-height: 0;
  }
  .section_guide-variants .guide-variants_media {
    aspect-ratio: 4 / 3;
  }
  .section_guide-variants .guide-variants_content {
    padding: 1.5rem 1.25rem 2rem;
    gap: 1.75rem;
  }
  .section_guide-variants .guide-variants_top { gap: 1.25rem; }
  .section_guide-variants .guide-dots li { font-size: 0.9375rem; line-height: 1.9; }
  .section_guide-variants .guide-dots li::before { top: 0.8125rem; }
  .section_guide-variants .slider-nav { margin-top: 1.5rem; }

  .section_guide-check .guide-check_layout { gap: 2rem; }
  .section_guide-check .guide-check_intro { gap: 1.75rem; }
  .section_guide-check .guide-check_box {
    padding: 2rem 1.25rem;
    gap: 1rem;
  }
  .section_guide-check .guide-dots li,
  .section_guide-check .guide-dots p { font-size: 0.9375rem; line-height: 1.9; }
  .section_guide-check .guide-dots li::before { top: 0.8125rem; }
  .section_guide-check .guide-check_button {
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (max-width: 479px) {
  .section_guide-intro .guide-intro_gallery {
    grid-template-columns: minmax(0, 1fr);
  }
  .section_guide-intro .guide-intro_img-item {
    aspect-ratio: 4 / 3;
  }
  .section_guide-hero .guide-hero_chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: calc(100vw - 2.5rem);
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }
  .section_guide-hero .guide-hero_chips::-webkit-scrollbar { display: none; }
  .section_guide-hero .guide-hero_chip-item { flex: none; }
}

/* 145. Warenkorb: Drawer + Seite (Figma 11043-19196) */

/* ---------- Nav-Zaehler ---------- */
.nav_shop-quantity[data-count="0"] {
  display: none;
}

/* ---------- Drawer (liegt per Script am Ende von body) ---------- */
.cart-drawer {
  --cart-ink: var(--color--dark);
  --cart-muted: #656d63;
  --cart-line: rgba(0, 0, 0, 0.1);
  --cart-card-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
  --cart-success: #2c7f1c;
  position: fixed;
  inset: 0;
  z-index: 2500;
  color: var(--cart-ink);
  font-family: var(--font--family);
}
.cart-drawer[hidden] {
  display: none;
}
.cart-drawer_backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(35, 46, 32, 0.45);
  opacity: 0;
  transition: opacity var(--transition--base);
}
.cart-drawer.is-open .cart-drawer_backdrop {
  opacity: 1;
}
.cart-drawer_panel {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, 40rem) minmax(20rem, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  width: min(71.5625rem, calc(100vw - 1.5rem));
  background-color: var(--color--white);
  box-shadow: var(--shadow--lg);
  overflow: hidden;
  opacity: 0;
  transform: translateX(2rem);
  transition: transform var(--transition--base), opacity var(--transition--base);
}
.cart-drawer.is-open .cart-drawer_panel {
  opacity: 1;
  transform: none;
}
.cart-drawer_form {
  display: none;
}

.cart-drawer_close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius--pill);
  background-color: #f6f4f3;
  color: var(--cart-ink);
  cursor: pointer;
  transition: background-color var(--transition--fast);
}
.cart-drawer_close .icon-svg {
  width: 1.0625rem;
  height: 1.0625rem;
}
@media (hover: hover) {
  .cart-drawer_close:hover {
    background-color: var(--color--grey-dark);
  }
}

/* Linke Spalte: Artikel + Empfehlungen (scrollt) */
.cart-drawer_main {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cart-drawer_section {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 3.75rem;
}
.cart-drawer_head {
  display: flex;
  align-items: center;
  gap: var(--space--12);
}
.cart-drawer_title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--cart-ink);
  text-wrap: balance;
}
.cart-drawer_title:focus {
  outline: none;
}
.cart-drawer_title:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.25rem;
}
.cart-drawer_badge-slot {
  display: flex;
}
.cart-drawer_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4375rem;
  height: 1.4375rem;
  padding: 0 0.375rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--red);
  color: var(--color--white);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
}
.cart-drawer_status {
  margin: -1.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cart-muted);
}
.cart-drawer_status:empty {
  display: none;
}
.cart-drawer_status.is-error {
  padding: var(--space--12) var(--space--16);
  border-radius: var(--radius--small);
  background-color: var(--color--error);
  color: var(--color--error-dark);
}

.cart-drawer_list,
.cart-drawer_upsell-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cart-drawer_upsell-list {
  gap: 0.625rem;
}

/* Karte (Warenkorbzeile + Empfehlung) */
.cart-drawer_item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 10.1875rem;
  padding: 0.5rem 2rem 0.5rem 0.625rem;
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  box-shadow: var(--cart-card-shadow);
  transition: opacity var(--transition--fast);
}
.cart-drawer_item.is-upsell {
  min-height: 9.0625rem;
}
.cart-drawer_item.is-loading {
  opacity: 0.55;
  pointer-events: none;
}
.cart-drawer_media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 7.5rem;
  height: 8.25rem;
}
.cart-drawer_media-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cart-drawer_body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.cart-drawer_top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space--16);
}
.cart-drawer_info {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
  max-width: 16.5rem;
}
.cart-drawer_name {
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  color: var(--cart-ink);
  text-decoration: none;
}
@media (hover: hover) {
  .cart-drawer_name:hover {
    text-decoration: underline;
  }
}
.cart-drawer_variant,
.cart-drawer_text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--cart-muted);
}
.cart-drawer_text:empty {
  display: none;
}
.cart-drawer_price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: none;
  gap: 0.125rem;
}
.cart-drawer_price-value {
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  white-space: nowrap;
}
.cart-drawer_price-compare {
  font-size: 0.8125rem;
  color: var(--cart-muted);
}
.cart-drawer_actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
}
.cart-drawer_qty {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 2.5rem;
  padding: 0 0.375rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--grey);
}
.cart-drawer_qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius--pill);
  background: transparent;
  color: var(--cart-ink);
  cursor: pointer;
  transition: background-color var(--transition--fast);
}
.cart-drawer_qty-btn .icon-svg {
  width: 0.875rem;
  height: 0.875rem;
}
.cart-drawer_qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
@media (hover: hover) {
  .cart-drawer_qty-btn:not(:disabled):hover {
    background-color: var(--color--grey-dark);
  }
}
.cart-drawer_qty-value {
  min-width: 1.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: rgba(35, 46, 32, 0.9);
}
.cart-drawer_remove {
  padding: 0.25rem 0;
  border: 0;
  background: transparent;
  color: var(--cart-ink);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
  cursor: pointer;
}
.cart-drawer_remove:disabled {
  opacity: 0.5;
}
@media (hover: hover) {
  .cart-drawer_remove:not(:disabled):hover {
    color: var(--color--red);
  }
}

/* Leer */
.cart-drawer_empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--24);
}
.cart-drawer_empty-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cart-muted);
}

/* Empfehlungen */
.cart-drawer_upsells {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: auto;
  padding: 2.75rem 3.75rem 2.5rem;
  border-top: 0.0625rem solid var(--cart-line);
}
.cart-drawer_upsells[hidden],
.cart-drawer_upsells:not(:has(.cart-drawer_item)) {
  display: none;
}
.cart-drawer_upsells-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  color: var(--cart-ink);
  letter-spacing: var(--tracking--heading);
  text-wrap: balance;
}
.cart-drawer_upsell-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.625rem;
}
.cart-drawer_unit-price {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--cart-muted);
  white-space: nowrap;
}
.cart-drawer_add-form {
  display: flex;
  flex: none;
  margin: 0;
}
.cart-drawer_add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius--pill);
  background-color: var(--color--red);
  color: var(--color--white);
  cursor: pointer;
  transition: background-color var(--transition--fast), transform var(--transition--fast);
}
.cart-drawer_add .icon-svg {
  width: 1.25rem;
  height: 1.25rem;
}
.cart-drawer_add:disabled {
  opacity: 0.6;
  cursor: progress;
}
@media (hover: hover) {
  .cart-drawer_add:not(:disabled):hover {
    background-color: var(--color--red-dark);
  }
}

/* Rechte Spalte: Zusammenfassung + Kasse */
.cart-drawer_aside {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  min-height: 0;
  padding: 3.75rem;
  overflow-y: auto;
  border-left: 0.0625rem solid var(--cart-line);
}
.cart-drawer_rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}
.cart-drawer_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
  color: var(--cart-muted);
}
.cart-drawer_row dt {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
}
.cart-drawer_row dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  text-align: right;
}
.cart-drawer_row-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space--8);
}
.cart-drawer_hint-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  color: #525151;
}
.cart-drawer_free {
  color: var(--cart-success);
}
.cart-drawer_shipping-hint {
  margin: -1.75rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--cart-muted);
}
.cart-drawer_total,
.cart-drawer_footer-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #525151;
}
.cart-drawer_total {
  margin-top: -1rem;
}
.cart-drawer_tax {
  margin: -2.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--cart-muted);
  text-align: right;
}
.cart-drawer_footer {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space--16);
  padding: 1.5rem 2.5rem;
  border-top: 0.0625rem solid var(--cart-line);
  border-left: 0.0625rem solid var(--cart-line);
  background-color: var(--color--white);
}
.cart-drawer_footer-total {
  display: none;
}
.cart-drawer_checkout {
  width: 100%;
  padding-left: var(--space--24);
  padding-right: var(--space--24);
}
.cart-drawer_payments,
.cart_payments {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space--8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cart-drawer_payments:empty,
.cart_payments:empty {
  display: none;
}
.cart-drawer_payment,
.cart_payment {
  display: flex;
}
.cart-drawer_payment svg,
.cart_payment svg {
  display: block;
  width: 2.1875rem;
  height: 1.5rem;
}

/* Leerer Warenkorb: nur linke Spalte */
.cart-drawer_panel.is-empty {
  grid-template-columns: minmax(0, 1fr);
  width: min(40rem, calc(100vw - 1.5rem));
}
.cart-drawer_panel.is-empty .cart-drawer_aside,
.cart-drawer_panel.is-empty .cart-drawer_footer {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cart-drawer_backdrop,
  .cart-drawer_panel {
    transition: none;
  }
}

@media (max-width: 991px) {
  .cart-drawer_panel {
    display: flex;
    flex-direction: column;
    width: min(40rem, calc(100vw - 1.5rem));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .cart-drawer_main,
  .cart-drawer_aside {
    flex: none;
    overflow: visible;
  }
  .cart-drawer_section {
    padding: 3rem 2.5rem 2.5rem;
  }
  .cart-drawer_upsells {
    margin-top: 0;
    padding: 2rem 2.5rem;
  }
  .cart-drawer_aside {
    gap: 2rem;
    padding: 2rem 2.5rem;
    border-left: 0;
    border-top: 0.0625rem solid var(--cart-line);
  }
  .cart-drawer_shipping-hint {
    margin-top: -1.25rem;
  }
  .cart-drawer_tax {
    margin-top: -1.75rem;
  }
  .cart-drawer_footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: auto;
    border-left: 0;
    box-shadow: 0 -0.25rem 1.5rem rgba(0, 0, 0, 0.06);
  }
}

@media (max-width: 767px) {
  .cart-drawer_panel {
    inset: 0;
    width: 100%;
    transform: translateY(1.5rem);
  }
  .cart-drawer_panel.is-empty {
    width: 100%;
  }
  .cart-drawer_close {
    top: 1rem;
    right: 1rem;
  }
  .cart-drawer_section {
    gap: 1.75rem;
    padding: 1.5rem 1rem 2rem;
  }
  .cart-drawer_head {
    min-height: 2rem;
    padding-right: 3rem;
  }
  .cart-drawer_title {
    font-size: 1.375rem;
  }
  .cart-drawer_status {
    margin-top: -0.75rem;
  }
  .cart-drawer_upsells {
    padding: 1.75rem 1rem;
  }
  .cart-drawer_aside {
    padding: 1.75rem 1rem 1.5rem;
  }
  .cart-drawer_title.is-summary {
    font-size: 1.25rem;
  }
  .cart-drawer_item {
    gap: 1rem;
    min-height: 0;
    padding: 0.75rem 1rem 0.75rem 0.5rem;
  }
  .cart-drawer_item.is-upsell {
    min-height: 0;
  }
  .cart-drawer_media {
    width: 5.5rem;
    height: 6.25rem;
  }
  .cart-drawer_footer {
    gap: var(--space--12);
    padding: 1rem;
  }
  .cart-drawer_footer-total {
    display: flex;
    font-size: 1.125rem;
  }
  .cart-drawer_checkout {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }
}

@media (max-width: 479px) {
  .cart-drawer_top {
    flex-direction: column;
    gap: var(--space--8);
  }
  .cart-drawer_price {
    align-items: flex-start;
  }
  .cart-drawer_media {
    width: 4.5rem;
    height: 5.5rem;
  }
  .cart-drawer_item {
    gap: 0.75rem;
  }
  .cart-drawer_item.is-upsell .cart-drawer_body {
    gap: var(--space--8);
  }
  .cart-drawer_row dt,
  .cart-drawer_row dd {
    font-size: 0.9375rem;
  }
}

/* ---------- Warenkorb-Seite ---------- */
.section_cart {
  --cart-ink: var(--color--dark);
  --cart-muted: #656d63;
  --cart-line: rgba(0, 0, 0, 0.1);
  --cart-card-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
  --cart-success: #2c7f1c;
}
.section_cart .cart_head {
  display: flex;
  align-items: center;
  gap: var(--space--16);
  margin-bottom: var(--space--40);
}
.section_cart .cart_title {
  margin: 0;
}
.section_cart .cart_title:focus {
  outline: none;
}
.section_cart .cart_title:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.25rem;
}
.section_cart .cart_badge-slot {
  display: flex;
}
.section_cart .cart_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  border-radius: var(--radius--pill);
  background-color: var(--color--red);
  color: var(--color--white);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}
.section_cart .cart_status {
  margin: calc(var(--space--24) * -1) 0 var(--space--24);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cart-muted);
}
.section_cart .cart_status:empty {
  display: none;
}
.section_cart .cart_status.is-error {
  padding: var(--space--12) var(--space--16);
  border-radius: var(--radius--small);
  background-color: var(--color--error);
  color: var(--color--error-dark);
}
.section_cart .cart_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26.5rem);
  gap: var(--space--48);
  align-items: start;
}
.section_cart .cart_layout[data-item-count="0"] {
  grid-template-columns: minmax(0, 1fr);
}
.section_cart .cart_main,
.section_cart .cart_form {
  display: flex;
  flex-direction: column;
  gap: var(--space--24);
}
.section_cart .cart_list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section_cart .cart_item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 10.1875rem;
  padding: 0.75rem 2rem 0.75rem 0.625rem;
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  box-shadow: var(--cart-card-shadow);
  transition: opacity var(--transition--fast);
}
.section_cart .cart_item.is-loading {
  opacity: 0.55;
  pointer-events: none;
}
.section_cart .cart_image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 8.5rem;
  height: 9rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.section_cart .cart_image-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.section_cart .cart_body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.section_cart .cart_top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space--24);
}
.section_cart .cart_product-info {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
  max-width: 28rem;
}
.section_cart .cart_product-name {
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--cart-ink);
  text-decoration: none;
}
@media (hover: hover) {
  .section_cart .cart_product-name:hover {
    text-decoration: underline;
  }
}
.section_cart .cart_product-variant,
.section_cart .cart_product-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--cart-muted);
}
.section_cart .cart_product-text:empty {
  display: none;
}
.section_cart .cart_price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: none;
  gap: 0.125rem;
  font-weight: 400;
}
.section_cart .cart_price-value {
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  white-space: nowrap;
}
.section_cart .cart_price-compare {
  font-size: 0.875rem;
  color: var(--cart-muted);
  text-decoration: none;
}
.section_cart .cart_actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
}
.section_cart .cart_quantity {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: auto;
  height: 2.5rem;
  padding: 0 0.375rem;
  border: 0;
  border-radius: var(--radius--pill);
  background-color: var(--color--grey);
  text-align: center;
}
.section_cart .cart_quantity-adjust {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius--pill);
  background: transparent;
  color: var(--cart-ink);
  cursor: pointer;
  transition: background-color var(--transition--fast);
}
.section_cart .cart_quantity-adjust .icon-svg {
  width: 0.875rem;
  height: 0.875rem;
}
.section_cart .cart_quantity-adjust:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
@media (hover: hover) {
  .section_cart .cart_quantity-adjust:hover {
    background-color: transparent;
  }
  .section_cart .cart_quantity-adjust:not(:disabled):hover {
    background-color: var(--color--grey-dark);
  }
}
.section_cart .cart_quantity-value {
  min-width: 1.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: rgba(35, 46, 32, 0.9);
}
.section_cart .cart_remove {
  margin: 0;
  padding: 0.25rem 0;
  border: 0;
  background: transparent;
  color: var(--cart-ink);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
  cursor: pointer;
}
@media (hover: hover) {
  .section_cart .cart_remove:not(:disabled):hover {
    color: var(--color--red);
  }
}
.section_cart .cart_empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--24);
  padding: var(--space--48);
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  box-shadow: var(--cart-card-shadow);
  text-align: left;
}
.section_cart .cart_empty-text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--cart-muted);
}
.section_cart .cart_note {
  display: flex;
  flex-direction: column;
  gap: var(--space--8);
  margin-top: var(--space--16);
}

/* Zusammenfassung */
.section_cart .cart_summary {
  position: sticky;
  top: calc(var(--nav-height, 7rem) + var(--space--24));
  display: flex;
  flex-direction: column;
  gap: var(--space--24);
  padding: 2.5rem;
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  box-shadow: var(--cart-card-shadow);
}
.section_cart .cart_summary-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.section_cart .cart_summary-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}
.section_cart .cart_summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
  color: var(--cart-muted);
  font-size: 1rem;
}
.section_cart .cart_summary-row dt {
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
}
.section_cart .cart_summary-value {
  margin: 0;
  font-weight: 400;
  line-height: 1.7;
  text-align: right;
}
.section_cart .cart_summary-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space--8);
}
.section_cart .cart_hint-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  color: #525151;
}
.section_cart .cart_summary-free {
  color: var(--cart-success);
}
.section_cart .cart_shipping-hint {
  margin: calc(var(--space--12) * -1) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--cart-muted);
}
.section_cart .cart_summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
  padding-top: var(--space--16);
  border-top: 0.0625rem solid var(--cart-line);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #525151;
}
.section_cart .cart_summary-note {
  margin-top: calc(var(--space--16) * -1);
  font-size: 0.75rem;
  color: var(--cart-muted);
}
.section_cart .cart_checkout {
  padding-left: var(--space--24);
  padding-right: var(--space--24);
}
.section_cart .cart_trust {
  margin-top: 0;
}
.section_cart .cart_trust:empty {
  display: none;
}

@media (max-width: 991px) {
  .section_cart .cart_layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space--32);
  }
  .section_cart .cart_summary {
    position: static;
  }
}

@media (max-width: 767px) {
  .section_cart .cart_head {
    margin-bottom: var(--space--24);
  }
  .section_cart .cart_status {
    margin-top: calc(var(--space--8) * -1);
  }
  .section_cart .cart_item {
    gap: 1rem;
    min-height: 0;
    padding: 0.75rem 1rem 0.75rem 0.5rem;
  }
  .section_cart .cart_image {
    width: 5.5rem;
    height: 6.25rem;
  }
  .section_cart .cart_product-name,
  .section_cart .cart_price-value {
    font-size: 1.0625rem;
  }
  .section_cart .cart_product-text {
    font-size: 0.8125rem;
  }
  .section_cart .cart_summary {
    padding: 1.75rem 1.25rem;
  }
  .section_cart .cart_summary-title {
    font-size: 1.25rem;
  }
  /* Kasse-Button klebt unten, solange die Zusammenfassung im Bild ist */
  .section_cart .cart_checkout {
    position: sticky;
    bottom: var(--space--12);
    z-index: 1;
    box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.12);
  }
}

@media (max-width: 479px) {
  .section_cart .cart_top {
    flex-direction: column;
    gap: var(--space--8);
  }
  .section_cart .cart_price {
    align-items: flex-start;
  }
  .section_cart .cart_image {
    width: 4.5rem;
    height: 5.5rem;
  }
  .section_cart .cart_item {
    gap: 0.75rem;
  }
}

/* =============================================================
   146. Formulare: Leerzeichen um den Datenschutz-Link
   Der Builder entfernt das Leerzeichen zwischen zwei Inline-
   Elementen ("Ich habe die" + Link + "gelesen …") in den
   Seitenkopien, daher der Abstand per CSS.
   ============================================================= */
.dealer-form_check-link,
.kontakt-form_check-link,
.dl-access_check-link {
  margin-left: 0.25em;
  margin-right: 0.25em;
}

/* =============================================================
   147. Rezepte: Pagination-Wrapper, Zubereitungstext
   ============================================================= */
.recipe-slider_paginate,
.recipe-index_paginate,
.downloads_paginate {
  display: contents;
}
.section_recipe-steps .recipe-steps_preparation .recipe-steps_text ul,
.section_recipe-steps .recipe-steps_preparation .recipe-steps_text ol {
  padding-left: 1.25rem;
}
.section_recipe-steps .recipe-steps_preparation .recipe-steps_text li + li {
  margin-top: 0.375rem;
}
.section_recipe-steps .recipe-steps_preparation .recipe-steps_text a {
  color: #232e20;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
@media (hover: hover) {
  .section_recipe-steps .recipe-steps_preparation .recipe-steps_text a:hover {
    color: #c5393c;
  }
}

/* =============================================================
   148. Testimonials: Start-Button, Controls erst nach Klick
   ============================================================= */
.section_testimonials-list .testimonials-list_start {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0 0 0 0.25rem;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(0.375rem);
  backdrop-filter: blur(0.375rem);
  color: var(--color--white);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.section_testimonials-list .testimonials-list_start-icon {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
}
.section_testimonials-list .testimonials-list_start:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.25rem;
}
.section_testimonials-list .testimonials-list_start[hidden],
.section_testimonials-list .testimonials-list_controls[hidden] {
  display: none;
}
@media (hover: hover) {
  .section_testimonials-list .testimonials-list_start:hover {
    background-color: rgba(0, 0, 0, 0.4);
    transform: translate(-50%, -50%) scale(1.05);
  }
}
@media (max-width: 767px) {
  .section_testimonials-list .testimonials-list_start {
    width: 3.75rem;
    height: 3.75rem;
  }
  .section_testimonials-list .testimonials-list_start-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* ===== 149. Kollektion: Filter & Sortierung (Figma 10761-12861) ===== */
/* Pills "Eigenschaften" + "Sortieren nach" mit Dropdown-Panels,
   Eigenschaften-Filter (Produkt-Tags) als gestylte Checkboxen,
   "Mehr Produkte laden" statt nummerierter Paginierung. */
.section_collection-products .collection-products_tools {
  gap: 0.5rem;
}
.section_collection-products .collection-products_dd {
  position: relative;
  display: inline-flex;
}
.section_collection-products .collection-products_dd > .chip {
  gap: 0.25rem;
  padding: 0.75rem 1.5rem;
  border: 0.0625rem solid transparent;
  background-color: var(--color--grey);
  color: var(--color--dark);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
}
.section_collection-products.is-theme-grey .collection-products_dd > .chip,
.section_collection-products .is-theme-grey .collection-products_dd > .chip {
  border-color: var(--border-color--primary);
  background-color: var(--color--white);
}
.section_collection-products .collection-products_dd > .chip .icon-1x1-xsmall {
  width: 0.75rem;
  height: 0.75rem;
  font-size: 0.75rem;
  color: var(--color--red);
  transition: transform var(--transition--fast);
}
.section_collection-products .collection-products_dd.is-open > .chip .icon-1x1-xsmall {
  transform: rotate(180deg);
}
.section_collection-products .collection-products_sort .icon-1x1-xsmall {
  margin-left: 0.125rem;
}
.section_collection-products .collection-products_sort .collection-products_sort-value {
  padding: 0;
  color: var(--color--red);
}
.section_collection-products .collection-products_filter-count {
  color: var(--color--red);
}
/* Geoeffneter Filter: Pill dunkelgruen, Schrift weiss */
.section_collection-products .collection-products_dd > .collection-products_filter-toggle.is-active {
  border-color: var(--color--green);
  background-color: var(--color--green);
  color: var(--color--white);
}
.section_collection-products .collection-products_filter-toggle.is-active .icon-1x1-xsmall,
.section_collection-products .collection-products_filter-toggle.is-active .collection-products_filter-count {
  color: var(--color--white);
}
.section_collection-products .collection-products_dd > .chip:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}

/* Panel */
.section_collection-products .collection-products_dd-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  min-width: 17.5rem;
  max-width: calc(100vw - 2.5rem);
  padding: 0.5rem;
  border-radius: 0.75rem;
  background-color: var(--color--white);
  color: var(--color--dark);
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.12);
  text-align: left;
}
.section_collection-products .collection-products_dd-panel.is-sort {
  left: auto;
  right: 0;
  min-width: 13.75rem;
}
.section_collection-products .collection-products_dd-panel[hidden] {
  display: none;
}

/* Filter-Formular */
.section_collection-products .collection-products_filter-form {
  display: block;
}
.section_collection-products .collection-products_filter-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.section_collection-products .collection-products_filter-title {
  display: block;
  margin: 0;
  padding: 0.625rem 1rem 0.375rem;
  color: #656d63;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.section_collection-products .collection-products_filter-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.section_collection-products .collection-products_filter-item {
  display: contents;
}
.section_collection-products .collection-products_filter-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  color: var(--color--dark);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color var(--transition--fast);
}
.section_collection-products .collection-products_filter-input {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.section_collection-products .collection-products_filter-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 0.0625rem solid rgba(35, 46, 32, 0.3);
  border-radius: 0.25rem;
  background-color: var(--color--white);
  color: var(--color--white);
  font-size: 0.75rem;
  transition: background-color var(--transition--fast), border-color var(--transition--fast);
}
.section_collection-products .collection-products_filter-box .icon-svg {
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0;
}
.section_collection-products .collection-products_filter-option:has(.collection-products_filter-input:checked) .collection-products_filter-box {
  border-color: var(--color--green);
  background-color: var(--color--green);
}
.section_collection-products .collection-products_filter-option:has(.collection-products_filter-input:checked) .collection-products_filter-box .icon-svg {
  opacity: 1;
}
.section_collection-products .collection-products_filter-option:has(.collection-products_filter-input:checked) {
  font-weight: 600;
}
.section_collection-products .collection-products_filter-option:has(.collection-products_filter-input:focus-visible) {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: -0.125rem;
}
.section_collection-products .collection-products_filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 0.75rem 0.5rem 0.25rem;
  border-top: 0.0625rem solid var(--border-color--primary);
}
.section_collection-products .collection-products_filter-reset {
  margin-right: auto;
  padding: 0.25rem 0.5rem;
  color: var(--color--red);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.section_collection-products .collection-products_filter-apply {
  padding: 0.625rem 1.5rem;
}

/* Sortier-Optionen */
.section_collection-products .collection-products_sort-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section_collection-products .collection-products_sort-option {
  display: block;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  color: var(--color--dark);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color var(--transition--fast);
}
.section_collection-products .collection-products_sort-option[aria-current="true"] {
  background-color: var(--color--grey);
  color: var(--color--red);
  font-weight: 600;
}
.section_collection-products .collection-products_sort-option:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: -0.125rem;
}

/* Mehr laden */
.section_collection-products .collection-products_more {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}
.section_collection-products .collection-products_more[hidden] {
  display: none;
}
.section_collection-products .collection-products_more-button.is-loading {
  opacity: 0.6;
  cursor: progress;
}

@media (hover: hover) {
  .section_collection-products .collection-products_dd > .chip:hover {
    border-color: transparent;
    background-color: var(--color--grey-dark);
    color: var(--color--dark);
  }
  .section_collection-products.is-theme-grey .collection-products_dd > .chip:hover,
  .section_collection-products .is-theme-grey .collection-products_dd > .chip:hover {
    border-color: var(--border-color--primary);
  }
  .section_collection-products .collection-products_dd > .collection-products_filter-toggle.is-active:hover {
    border-color: var(--color--green-dark);
    background-color: var(--color--green-dark);
    color: var(--color--white);
  }
  .section_collection-products .collection-products_filter-option:hover,
  .section_collection-products .collection-products_sort-option:hover {
    background-color: var(--color--grey);
  }
  .section_collection-products .collection-products_filter-option:hover .collection-products_filter-box {
    border-color: var(--color--green);
  }
}

@media (max-width: 767px) {
  .section_collection-products .collection-products_tools {
    width: 100%;
  }
  .section_collection-products .collection-products_dd {
    flex: 1 1 0;
    min-width: 0;
  }
  .section_collection-products .collection-products_dd > .chip {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    padding: 0.75rem 1.25rem 0.75rem 1.5rem;
  }
  .section_collection-products .collection-products_dd > .chip .icon-1x1-xsmall {
    margin-left: auto;
  }
  .section_collection-products .collection-products_dd-panel {
    width: max-content;
    min-width: 100%;
  }
  .section_collection-products .collection-products_more {
    margin-top: 2.5rem;
  }
}

/* ===== 151. Collection Hero Metafelder ===== */
/* Anker-Chips ohne Sprungziel auf der Seite werden per Script ausgeblendet */
.anchor-chips[hidden],
.anchor-chips_item[hidden] {
  display: none;
}
.collection-hero_img {
  object-fit: cover;
}

/* ===== 150. Rubrik Karten Slider (Figma 1896-40421) + Split Banner Drittel (Figma 11126-19417) ===== */

/* ---------- Rubrik Karten Slider: Karte 632x549, Bild 616x297 mit 8px Rand ---------- */
.section_guide-cards .section-head {
  margin-bottom: 2.5rem;
}
.section_guide-cards .section-head_content {
  gap: 0.625rem;
}
.section_guide-cards .section-head_actions .button.is-link {
  font-size: var(--font-size--link-2);
}
.section_guide-cards .slider-nav {
  margin-top: 2.5rem;
}
.section_inner .guide-cards_swiper {
  overflow: visible;
}
.guide-cards_swiper .swiper-slide.guide-cards_slide {
  display: flex;
  width: 39.5rem;
  max-width: 85%;
  height: auto;
}
.section_guide-cards .guide-card {
  display: flex;
  width: 100%;
  min-height: 34.3125rem;
  background-color: var(--color--white);
  border-radius: 0.625rem;
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.section_guide-cards .guide-card_link {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.5rem;
  color: inherit;
  text-decoration: none;
  border-radius: 0.625rem;
}
.section_guide-cards .guide-card_link:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: -0.125rem;
}
.section_guide-cards .guide-card_media {
  position: relative;
  flex: none;
  aspect-ratio: 616 / 297;
  border-radius: 0.625rem;
  overflow: hidden;
  background-color: var(--color--grey);
}
.section_guide-cards .guide-card_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_guide-cards .guide-card_label {
  position: absolute;
  top: 0;
  left: 2.25rem;
  padding: 2.6875rem 0 0 0.875rem;
  pointer-events: none;
}
.section_guide-cards .guide-card_label-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 8.5625rem;
  height: 6.125rem;
  background-color: rgba(255, 255, 255, 0.21);
}
.section_guide-cards .guide-card_script {
  position: relative;
  display: block;
  font-size: 1.75rem;
  line-height: 1.66;
  letter-spacing: 0.002em;
  color: var(--color--white);
  white-space: nowrap;
}
.section_guide-cards .guide-card_body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  max-width: 30.125rem;
  padding: 3.125rem 2.25rem 3.5rem;
}
.section_guide-cards .guide-card_title {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--color--dark);
  transition: color 0.2s ease;
}
.section_guide-cards .guide-card_text {
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #656d63;
}
.section_guide-cards .guide-card_text p {
  margin: 0;
}
@media (hover: hover) {
  .section_guide-cards .guide-card_link:hover .guide-card_title {
    color: var(--color--red);
  }
}
@media (max-width: 991px) {
  .guide-cards_swiper .swiper-slide.guide-cards_slide {
    max-width: 90%;
  }
  .section_guide-cards .guide-card {
    min-height: 0;
  }
  .section_guide-cards .guide-card_body {
    padding: 2.5rem 1.75rem 3rem;
  }
}
@media (max-width: 767px) {
  .section_guide-cards .section-head {
    margin-bottom: 1.5rem;
  }
  .section_guide-cards .slider-nav {
    margin-top: 1.5rem;
  }
  .guide-cards_swiper .swiper-slide.guide-cards_slide {
    max-width: 92%;
  }
  .section_guide-cards .guide-card_media {
    aspect-ratio: 4 / 3;
  }
  .section_guide-cards .guide-card_label {
    left: 1.25rem;
    padding-top: 2rem;
  }
  .section_guide-cards .guide-card_label-bg {
    width: 7rem;
    height: 5rem;
  }
  .section_guide-cards .guide-card_script {
    font-size: 1.5rem;
  }
  .section_guide-cards .guide-card_body {
    gap: 0.75rem;
    padding: 1.75rem 1rem 2rem;
  }
  .section_guide-cards .guide-card_title {
    font-size: 1.375rem;
  }
}

/* ---------- Split Banner (Haendler-CTA): drei gleiche Drittel, kein Bild-Zoom, Mobil = Bild + Panel ---------- */
.split-banner_layout {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.section_split-banner .media-frame_img {
  transition: none;
}
@media (hover: hover) {
  .section_split-banner .media-frame:hover .media-frame_img,
  .section_split-banner a:hover > .media-frame .media-frame_img {
    transform: none;
  }
}
@media (max-width: 991px) {
  .split-banner_layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .split-banner_layout > .split-banner_media:last-child {
    display: none;
  }
  .split-banner_panel {
    justify-content: center;
    gap: 2.5rem;
    min-height: 23.4375rem;
    padding: 2.5rem 1.5rem;
  }
}
@media (max-width: 767px) {
  .split-banner_layout > .split-banner_media:first-child {
    aspect-ratio: 1 / 1;
  }
  .split-banner_logo,
  .split-banner_logo-svg {
    width: 14.375rem;
  }
}

/* =============================================================
   153. Social Media: Stills, Badges, Popup mit Bild/Video
   ============================================================= */
.section_social-media .social-media_card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.section_social-media .social-media_card:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: -0.25rem;
}
.section_social-media .social-media_card .media-frame_img {
  transition: none;
  transform: none;
}
.section_social-media .social-media_badges {
  position: absolute;
  top: 0.786rem;
  right: 0.9375rem;
  z-index: 1;
  display: flex;
  gap: 0.5rem;
  pointer-events: none;
}
.section_social-media .social-media_badge,
.section_social-media .social-media_control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  border: 0;
  border-radius: 4.6875rem;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(0.264rem);
  backdrop-filter: blur(0.264rem);
  color: var(--color--white);
}
.section_social-media .social-media_icon {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}
.section_social-media .social-media_play {
  display: none;
}
.section_social-media .social-media_media[hidden] {
  display: none;
}
/* Popup */
.social-media_modal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color--white);
}
.social-media_modal::backdrop {
  background-color: rgba(35, 46, 32, 0.85);
}
.social-media_modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-media_modal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: min(26rem, calc(100vw - 2rem));
}
.social-media_modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - 9rem);
  overflow: hidden;
  background-color: #000000;
}
.social-media_modal-stage,
.social-media_modal-stage > .li-guard {
  display: block;
  width: 100%;
  height: 100%;
}
.social-media_modal-video,
.social-media_modal-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.social-media_modal-controls {
  position: absolute;
  top: 0.786rem;
  right: 0.9375rem;
  z-index: 1;
  display: flex;
  gap: 0.5rem;
}
.social-media_modal-controls[hidden] {
  display: none;
}
.social-media_control {
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.social-media_control:focus-visible,
.social-media_modal-close:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.125rem;
}
.social-media_control[data-sm-play] .is-play,
.social-media_control[data-sm-play][aria-pressed="true"] .is-pause,
.social-media_control[data-sm-sound] .is-sound,
.social-media_control[data-sm-sound][aria-pressed="true"] .is-muted {
  display: none;
}
.social-media_control[data-sm-play][aria-pressed="true"] .is-play,
.social-media_control[data-sm-sound][aria-pressed="true"] .is-sound {
  display: block;
}
.social-media_modal-close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--color--white);
  font-size: 1.25rem;
  cursor: pointer;
}
.social-media_modal-cta {
  width: 100%;
  max-width: 13.6875rem;
  min-height: 2.75rem;
}
@media (hover: hover) {
  .social-media_control:hover,
  .social-media_modal-close:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }
}
@media (max-width: 767px) {
  .social-media_modal-inner {
    width: calc(100vw - 2rem);
  }
  .social-media_modal-cta {
    max-width: none;
    min-height: 3.25rem;
  }
  .social-media_modal-close {
    top: 0.75rem;
    right: 0.75rem;
  }
}

/* =============================================================
   154. Pressematerial: Download-Links (Hauptdatei + weitere Formate)
   ============================================================= */
.section_article-content .article-press_links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

/* =============================================================
   155. Menü-Kacheln (Über uns): Label halbfett kursiv wie Figma 11200-18004
   ============================================================= */
.nav_mega-card-label {
  font-weight: 600;
  letter-spacing: 0.025rem;
}
.nav_mega-card-external {
  font-size: 1rem;
}

/* =============================================================
   156. Newsletter: Brevo-Formular (Inhalt aus Theme-Einstellungen)
   ============================================================= */
.section_newsletter-cta [data-nl-success][hidden],
.section_newsletter-cta [data-nl-error][hidden],
.section_newsletter-cta [data-nl-fields][hidden] {
  display: none;
}
.section_newsletter-cta .newsletter-cta_hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* =============================================================
   157. FAQ-Seite: Plus/Minus im runden Button (Figma 11128-39222)
   ============================================================= */
.section_faq .faq_icon {
  position: relative;
  border-radius: 50%;
}
.section_faq .faq_icon::before,
.section_faq .faq_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 0.09375rem;
  border-radius: 0.0625rem;
  background-color: var(--color--dark);
  transform: translate(-50%, -50%);
  transition: transform var(--transition--fast, 0.2s);
}
.section_faq .faq_icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.section_faq .faq_item.is-open .faq_icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
@media (max-width: 767px) {
  .section_faq .faq_icon::before,
  .section_faq .faq_icon::after {
    width: 0.875rem;
  }
}

/* =============================================================
   158. Rezept-Zutaten: Abstand Menge–Einheit (Leerzeichen geht bei der Konvertierung verloren)
   ============================================================= */
.section_recipe-ingredients .recipe-ingredients_unit:not(:empty) {
  margin-left: 0.25em;
}

/* =============================================================
   159. Suche Ergebnisse: Raster wie Figma 10761-23550 + Kategorien-Tab
   ============================================================= */
.section_search .search_grid {
  gap: 1.25rem;
}
.section_search .search_cat {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  color: var(--color--dark);
}
.section_search .search_cat-media {
  display: block;
  aspect-ratio: 305 / 200;
  border-radius: var(--radius--medium);
  background-color: var(--color--grey);
  overflow: hidden;
}
.section_search .search_cat-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition--base);
}
.section_search .search_cat-title {
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.section_search .search_cat:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.25rem;
  border-radius: var(--radius--medium);
}
@media (hover: hover) {
  .section_search .search_cat:hover .search_cat-img {
    transform: scale(1.03);
  }
  .section_search .search_cat:hover .search_cat-title {
    color: var(--color--red);
  }
}
@media (max-width: 767px) {
  .section_search .search_grid {
    gap: 1.5rem 0.75rem;
  }
  .section_search .search_cat-title {
    font-size: 1rem;
  }
}
/* Produktkarte in den Suchergebnissen (Figma 10761-23633) */
.section_search .product-item_body {
  padding: 1.875rem;
}
.section_search .product-item_title {
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.025rem;
}
.section_search .product-item_text {
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.035rem;
  color: rgba(35, 46, 32, 0.7);
}
@media (max-width: 767px) {
  .section_search .product-item_body {
    padding: 1.25rem;
  }
  .section_search .product-item_title {
    font-size: 1.0625rem;
  }
}

/* =============================================================
   160. SEO-Text: Links wie Fließtext, dunkel + unterstrichen (Figma 13-37780)
   ============================================================= */
.section_seo-text .text-rich-text a {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}
@media (hover: hover) {
  .section_seo-text .text-rich-text a:hover {
    color: var(--color--red);
  }
}

/* =============================================================
   161. Zertifikate-Seite (Layout "Raster", Figma 98-42527)
   ============================================================= */
.certificates_inner.is-layout-grid .certificates_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3.75rem;
  text-align: center;
}
.certificates_inner.is-layout-grid .certificates_head .section-head_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 54.125rem;
}
.certificates_inner.is-layout-grid .section-head_eyebrow {
  color: #656d63;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.certificates_inner.is-layout-grid .certificates_title {
  margin: 0;
  color: var(--color--dark);
  font-size: 3.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.03em;
}
.certificates_inner.is-layout-grid .certificates_nav {
  display: none;
}
.certificates_inner.is-layout-grid .certificates_grid {
  column-gap: 1rem;
  row-gap: 2.5rem;
}
.certificates_inner.is-layout-grid .certificate-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-height: 22.4375rem;
  height: 100%;
  padding: 0;
  border-radius: 0.625rem;
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.certificates_inner.is-layout-grid .certificate-card_media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 9.4375rem;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.12));
  background: none;
}
.certificates_inner.is-layout-grid .certificate-card_img {
  width: auto;
  height: auto;
  max-width: 8rem;
  max-height: 5rem;
  object-fit: contain;
}
.certificates_inner.is-layout-grid .certificate-card_body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.875rem 3.75rem 2.625rem;
  text-align: center;
}
/* Titel nur fuer Screenreader, Link ausblenden (nicht im Design) */
.certificates_inner.is-layout-grid .certificate-card_title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.certificates_inner.is-layout-grid .certificate-card_body .button.is-link {
  display: none;
}
.certificates_inner.is-layout-grid .certificate-card_text {
  color: var(--color--dark);
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
@media (max-width: 991px) {
  .certificates_inner.is-layout-grid .certificates_title {
    font-size: 2.75rem;
  }
  .certificates_inner.is-layout-grid .certificate-card_body {
    padding: 1.5rem 2rem 2rem;
  }
}
@media (max-width: 767px) {
  .certificates_inner.is-layout-grid .certificates_head {
    margin-bottom: 2.5rem;
  }
  .certificates_inner.is-layout-grid .section-head_eyebrow {
    font-size: 1rem;
  }
  .certificates_inner.is-layout-grid .certificates_title {
    font-size: 2.25rem;
  }
  .certificates_inner.is-layout-grid .certificates_grid {
    row-gap: 1rem;
  }
  .certificates_inner.is-layout-grid .certificate-card {
    min-height: 0;
  }
  .certificates_inner.is-layout-grid .certificate-card_media {
    height: 8rem;
  }
  .certificates_inner.is-layout-grid .certificate-card_body {
    padding: 1.25rem 1.5rem 1.75rem;
  }
}

/* =============================================================
   BW-01 Basenwelten: Rubrik Split (Text + randloses Halbbild)
   Desktop 50/50, Bild links oder rechts bis an den Viewport-Rand,
   Textspalte max. 30.3rem, 8.75rem vom Spaltenanfang eingerückt.
   ============================================================= */
.section_guide-split {
  --gs-inset: 8.75rem;
  --gs-inset-end: 3.75rem;
  --gs-edge: var(--space--80);
  --gs-muted: #656d63;
  --gs-green: #5c7f53;
}
.section_guide-split .guide-split_inner {
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}
.section_guide-split .guide-split_inner.is-theme-grey {
  background-image: linear-gradient(179deg, #f7f7f7 2%, #ffffff 61%, #f7f7f7 116%);
}
.section_guide-split .guide-split_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: var(--gs-min-height, 50.5rem);
}
.section_guide-split .guide-split_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  min-width: 0;
  padding: var(--section-pt, 6.6rem) var(--gs-inset-end) var(--section-pb, 6.6rem) var(--gs-inset);
  /* Bild läuft bis zum Bildschirmrand, Text fluchtet mit der Containerkante der anderen Sektionen
     (80rem Container, Rand = padding-global): 100% = halbe Sektionsbreite */
  padding-left: max(var(--gs-edge), 100% - 40rem);
}
.section_guide-split .guide-split_copy,
.section_guide-split .guide-split_titles {
  display: flex;
  flex-direction: column;
  max-width: 30.3125rem;
}
.section_guide-split .guide-split_copy { gap: 1.5rem; }
.section_guide-split .guide-split_titles { gap: 0.75rem; }
.section_guide-split .guide-split_eyebrow {
  color: var(--gs-muted);
}
.section_guide-split .guide-split_eyebrow:empty { display: none; }
.section_guide-split .guide-split_heading {
  margin: 0;
}
.section_guide-split .guide-split_text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gs-muted);
}
.section_guide-split .guide-split_text:empty { display: none; }
.section_guide-split .guide-split_text p { margin: 0; }
.section_guide-split .guide-split_text p + p { margin-top: 1.7em; }
.section_guide-split .guide-split_text a,
.section_guide-split .guide-split_feature-text a,
.section_guide-split .guide-split_slot-list a,
.section_guide-split .guide-split_tip-text a,
.section_guide-split .guide-split_list a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.section_guide-split .guide-split_media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background-color: var(--color--grey);
}
.section_guide-split .guide-split_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_guide-split .guide-split_inner.is-media-left .guide-split_media {
  order: -1;
}
.section_guide-split .guide-split_inner.is-media-left .guide-split_content {
  padding-left: var(--gs-inset);
  padding-right: max(var(--gs-edge), 100% - 40rem);
}
.section_guide-split .guide-split_actions {
  display: flex;
}

/* Blöcke: eine Flex-Reihe, jeder Block volle Breite; Tags stehen nebeneinander */
.section_guide-split .guide-split_blocks {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 0.5rem;
  max-width: 30.3125rem;
}
.section_guide-split .guide-split_blocks:empty { display: none; }
.section_guide-split .guide-split_block {
  flex: 0 0 100%;
  min-width: 0;
  margin-top: 2.5rem;
}
.section_guide-split .guide-split_blocks > .guide-split_block:first-child { margin-top: 0; }

/* Check */
.section_guide-split .guide-split_block.is-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color--dark);
}
.section_guide-split .guide-split_block.is-check + .guide-split_block.is-check { margin-top: 0.125rem; }
.section_guide-split .guide-split_check-icon {
  display: inline-flex;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.3rem;
  color: var(--color--red);
}
.section_guide-split .guide-split_check-icon svg {
  width: 1rem;
  height: 1rem;
}
.section_guide-split .guide-split_dot {
  display: none;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.55rem;
  border-radius: 50%;
  background-color: var(--gs-green);
}
.section_guide-split .is-list-dots .guide-split_check-icon { display: none; }
.section_guide-split .is-list-dots .guide-split_dot { display: block; }

/* Tag + Beschriftung (nur vor dem ersten Tag einer Reihe) */
.section_guide-split .guide-split_block.is-tag { display: contents; }
.section_guide-split .guide-split_tag-label {
  flex: 0 0 100%;
  margin-top: 2.5rem;
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  color: var(--color--dark);
}
.section_guide-split .guide-split_blocks > .guide-split_block.is-tag:first-child .guide-split_tag-label { margin-top: 0; }
.section_guide-split .guide-split_block.is-tag + .guide-split_block.is-tag .guide-split_tag-label { display: none; }
.section_guide-split .guide-split_tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  margin-top: 0.625rem;
  padding: 0.0625rem 0.75rem 0;
  background-color: var(--gs-green);
  color: var(--color--white);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.section_guide-split .guide-split_tag:empty { display: none; }

/* Merkmal */
.section_guide-split .guide-split_block.is-feature {
  position: relative;
  padding-left: 1rem;
}
.section_guide-split .guide-split_block.is-feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--gs-green);
}
.section_guide-split .guide-split_feature-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--color--dark);
}
.section_guide-split .guide-split_feature-text {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--gs-muted);
}
.section_guide-split .guide-split_feature-text p { margin: 0; }

/* Punkte-Liste */
.section_guide-split .guide-split_list-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  color: var(--gs-muted);
}
.section_guide-split .guide-split_dots ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section_guide-split .guide-split_dots li {
  position: relative;
  padding-left: 1.0625rem;
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 2.2;
  color: var(--color--dark);
}
.section_guide-split .guide-split_dots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.0625rem;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: var(--color--red);
}

/* Zeitpunkt (Tagesablauf) */
.section_guide-split .guide-split_slot-title {
  margin: 0 0 0.75rem;
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
  color: var(--color--dark);
}
.section_guide-split .guide-split_slot-list {
  font-size: 0.875rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--gs-muted);
}
.section_guide-split .guide-split_slot-list p { margin: 0; }
.section_guide-split .guide-split_slot-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.section_guide-split .guide-split_slot-list li {
  position: relative;
  padding-left: 1rem;
}
.section_guide-split .guide-split_slot-list li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.75rem;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background-color: currentColor;
}

/* Tipp */
.section_guide-split .guide-split_block.is-tip {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-radius: 0.625rem;
  background-color: var(--color--grey);
}
.section_guide-split .guide-split_tip-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color--red);
}
.section_guide-split .guide-split_tip-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.section_guide-split .guide-split_tip-title {
  margin: 0 0 0.25rem;
  font-size: var(--font-size--h6);
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
  color: var(--color--dark);
}
.section_guide-split .guide-split_tip-text {
  font-size: 0.875rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--gs-muted);
}
.section_guide-split .guide-split_tip-text p { margin: 0; }

/* Linkkarte */
.section_guide-split .guide-split_lc-heading {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  color: var(--color--dark);
}
.section_guide-split .guide-split_lc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 0.625rem;
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.06);
  color: var(--color--dark);
  text-decoration: none;
}
.section_guide-split .guide-split_lc:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
.section_guide-split .guide-split_lc-copy {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.section_guide-split .guide-split_lc-eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
  color: var(--gs-muted);
}
.section_guide-split .guide-split_lc-eyebrow:empty { display: none; }
.section_guide-split .guide-split_lc-title {
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.25;
}
.section_guide-split .guide-split_lc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background-color: var(--color--red);
  color: var(--color--white);
  font-size: 0.75rem;
  transition: background-color 0.2s ease;
}
@media (hover: hover) {
  .section_guide-split .guide-split_lc:hover .guide-split_lc-arrow { background-color: var(--color--red-dark); }
  .section_guide-split .guide-split_lc:hover .guide-split_lc-title { color: var(--color--red); }
}
@media (max-width: 991px) {
  .section_guide-split {
    --gs-inset: 2.5rem;
    --gs-inset-end: 2.5rem;
    --gs-edge: var(--space--40);
  }
}
@media (max-width: 767px) {
  .section_guide-split .guide-split_layout {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .section_guide-split .guide-split_media,
  .section_guide-split .guide-split_inner.is-media-left .guide-split_media {
    order: -1;
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin: var(--section-pt-m, 3rem) var(--space--20) 0;
    border-radius: 0.625rem;
  }
  .section_guide-split .guide-split_content {
    gap: 2rem;
    padding: 2rem var(--space--20) var(--section-pb-m, 3rem);
  }
  .section_guide-split .guide-split_inner.is-media-left .guide-split_content {
    padding-left: var(--space--20);
    padding-right: var(--space--20);
  }
  .section_guide-split .guide-split_copy,
  .section_guide-split .guide-split_titles,
  .section_guide-split .guide-split_blocks {
    max-width: none;
  }
  .section_guide-split .guide-split_block { margin-top: 2rem; }
  .section_guide-split .guide-split_tag-label { margin-top: 2rem; }
  .section_guide-split .guide-split_text p + p { margin-top: 1.2em; }
  .section_guide-split .guide-split_feature-title { font-size: 1.125rem; }
  .section_guide-split .guide-split_block.is-tip { padding: 1rem 1.25rem; }
  .section_guide-split .guide-split_lc { padding: 1rem 1.25rem; }
  .section_guide-split .guide-split_lc-title { font-size: 1.0625rem; }
}

/* =============================================================
   BW-02 Basenwelten: Rubrik Lebensmittel Tabelle (80:20)
   Spaltenfarben kommen als --ft-c1..4 aus den Section-Settings,
   Zellen sind helle Tönungen davon (color-mix).
   ============================================================= */
.section_guide-foodtable {
  --ft-muted: #656d63;
}
.section_guide-foodtable .guide-foodtable_head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.section_guide-foodtable .guide-foodtable_eyebrow { color: var(--ft-muted); }
.section_guide-foodtable .guide-foodtable_heading { margin: 0; }
.section_guide-foodtable .guide-foodtable_intro {
  max-width: 41.5rem;
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ft-muted);
}
.section_guide-foodtable .guide-foodtable_intro p { margin: 0; }
.section_guide-foodtable .guide-foodtable_scroll {
  overflow-x: auto;
  border-radius: 0.625rem;
  -webkit-overflow-scrolling: touch;
}
.section_guide-foodtable .guide-foodtable_scroll:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
.section_guide-foodtable .guide-foodtable_table {
  width: 100%;
  min-width: 48rem;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.section_guide-foodtable .guide-foodtable_table th,
.section_guide-foodtable .guide-foodtable_table td {
  padding: 1rem 1.5rem;
  border-right: 0.0625rem solid var(--color--white);
  border-bottom: 0.0625rem solid var(--color--white);
  text-align: left;
  vertical-align: middle;
}
.section_guide-foodtable .guide-foodtable_table tr > :last-child { border-right: 0; }
.section_guide-foodtable .guide-foodtable_table tbody tr:last-child > * { border-bottom: 0; }
.section_guide-foodtable .guide-foodtable_group {
  height: 2.3rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--color--white);
  font-size: 0.875rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
}
.section_guide-foodtable .guide-foodtable_group.is-continued {
  border-left: 0;
}
.section_guide-foodtable .guide-foodtable_group.is-continued .guide-foodtable_group-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.section_guide-foodtable .guide-foodtable_th {
  height: 3rem;
  color: var(--color--dark);
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
}
.section_guide-foodtable .guide-foodtable_td {
  color: var(--color--dark);
  font-size: 0.875rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.section_guide-foodtable .guide-foodtable_rt p { margin: 0; }
.section_guide-foodtable .guide-foodtable_rt a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.section_guide-foodtable .guide-foodtable_group.is-col-1 { background-color: var(--ft-c1, #5c7f53); }
.section_guide-foodtable .guide-foodtable_group.is-col-2 { background-color: var(--ft-c2, #5c7f53); }
.section_guide-foodtable .guide-foodtable_group.is-col-3 { background-color: var(--ft-c3, #c8393c); }
.section_guide-foodtable .guide-foodtable_group.is-col-4 { background-color: var(--ft-c4, #e5764a); }
.section_guide-foodtable .guide-foodtable_group.is-continued.is-col-2 { box-shadow: -0.0625rem 0 0 var(--ft-c2, #5c7f53); }
.section_guide-foodtable .guide-foodtable_group.is-continued.is-col-3 { box-shadow: -0.0625rem 0 0 var(--ft-c3, #c8393c); }
.section_guide-foodtable .guide-foodtable_group.is-continued.is-col-4 { box-shadow: -0.0625rem 0 0 var(--ft-c4, #e5764a); }
.section_guide-foodtable .guide-foodtable_th.is-col-1 { background-color: color-mix(in srgb, var(--ft-c1, #5c7f53) 20%, #ffffff); }
.section_guide-foodtable .guide-foodtable_th.is-col-2 { background-color: color-mix(in srgb, var(--ft-c2, #5c7f53) 20%, #ffffff); }
.section_guide-foodtable .guide-foodtable_th.is-col-3 { background-color: color-mix(in srgb, var(--ft-c3, #c8393c) 20%, #ffffff); }
.section_guide-foodtable .guide-foodtable_th.is-col-4 { background-color: color-mix(in srgb, var(--ft-c4, #e5764a) 20%, #ffffff); }
.section_guide-foodtable .guide-foodtable_td.is-col-1 { background-color: color-mix(in srgb, var(--ft-c1, #5c7f53) 7%, #ffffff); }
.section_guide-foodtable .guide-foodtable_td.is-col-2 { background-color: color-mix(in srgb, var(--ft-c2, #5c7f53) 7%, #ffffff); }
.section_guide-foodtable .guide-foodtable_td.is-col-3 { background-color: color-mix(in srgb, var(--ft-c3, #c8393c) 7%, #ffffff); }
.section_guide-foodtable .guide-foodtable_td.is-col-4 { background-color: color-mix(in srgb, var(--ft-c4, #e5764a) 7%, #ffffff); }
@media (max-width: 767px) {
  .section_guide-foodtable .guide-foodtable_head { margin-bottom: 1.5rem; }
  .section_guide-foodtable .guide-foodtable_table { min-width: 40rem; }
  .section_guide-foodtable .guide-foodtable_table th,
  .section_guide-foodtable .guide-foodtable_table td { padding: 0.75rem 1rem; }
  .section_guide-foodtable .guide-foodtable_th { font-size: 0.9375rem; }
  .section_guide-foodtable .guide-foodtable_td { font-size: 0.8125rem; }
}

/* =============================================================
   BW-03 Basenwelten: Erweiterungen bestehender Rubrik-Sections
   ============================================================= */
/* Screenreader-Text */
.bw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Rubrik Hero: externer Chip mit Pfeil */
.section_guide-hero .guide-hero_chip {
  gap: 0.5rem;
}
.section_guide-hero .guide-hero_chip-icon {
  display: inline-flex;
  font-size: 1.125rem;
}

/* Überschrift mit Link (Rubrik Vorteile, Rubrik Varianten) */
.bw-heading-link { margin: 0; }
.bw-heading-link_part { margin-left: 0.3em; }
.bw-heading-link_a {
  display: inline;
  color: var(--color--red);
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}
.bw-heading-link_icon {
  display: inline-flex;
  margin-left: 0.15em;
  font-size: 0.75em;
  vertical-align: 0.05em;
}
.bw-heading-link_a:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
@media (hover: hover) {
  .bw-heading-link_a:hover { color: var(--color--red-dark); }
}

/* Rubrik Vorteile: 2 Karten = 2 Spalten, verlinkte Karte */
.section_guide-benefits .guide-benefits_wrap.is-count-2 .guide-benefits_grid,
.section_guide-benefits .guide-benefits_wrap.is-count-4 .guide-benefits_grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.section_guide-benefits .guide-benefits_wrap.is-count-1 .guide-benefits_grid {
  grid-template-columns: minmax(0, 1fr);
}
.section_guide-benefits .guide-benefits_link {
  color: inherit;
  text-decoration: none;
}
.section_guide-benefits .guide-benefits_link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.section_guide-benefits .guide-benefits_card:has(.guide-benefits_link:focus-visible) {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
.section_guide-benefits .guide-benefits_link:focus-visible { outline: none; }
@media (hover: hover) {
  .section_guide-benefits .guide-benefits_link:hover { text-decoration: underline; text-underline-offset: 0.15em; }
}
@media (max-width: 767px) {
  .section_guide-benefits .guide-benefits_wrap.is-count-2 .guide-benefits_grid,
  .section_guide-benefits .guide-benefits_wrap.is-count-4 .guide-benefits_grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Rubrik Varianten: Button direkt unter dem Text */
.section_guide-variants .guide-variants_copy .guide-variants_button {
  align-self: flex-start;
  margin-top: 0.25rem;
}

/* Rubrik Produkte: Bild links */
.section_guide-products .guide-products_inner.is-layout-split.is-media-left .guide-products_media {
  order: -1;
  margin-right: 0;
  margin-left: calc(-1 * var(--gp-gutter) - max(0px, (100vw - var(--container--large) - 2 * var(--gp-gutter)) / 2));
}
.section_guide-products .guide-products_inner.is-layout-split.is-media-left .guide-products_content {
  padding-left: 8.75rem;
}
.section_guide-products .guide-products_actions { display: flex; }
/* Rubrik Produkte: Layout "Bild oben" */
.section_guide-products .guide-products_inner.is-layout-top {
  background-image: none;
}
.section_guide-products .guide-products_inner.is-layout-top .guide-products_layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 5rem;
  min-height: 0;
  padding-top: var(--section-pt, 7.2rem);
  padding-bottom: var(--section-pb, 7.2rem);
}
.section_guide-products .guide-products_inner.is-layout-top .guide-products_media {
  order: -1;
  min-height: 0;
  margin: 0;
  aspect-ratio: 1280 / 420;
  border-radius: 0.625rem;
}
.section_guide-products .guide-products_inner.is-layout-top .guide-products_content {
  display: grid;
  grid-template-columns: minmax(0, 29.625rem) minmax(0, 37.6875rem);
  justify-content: space-between;
  align-items: start;
  max-width: none;
  padding: 0;
  gap: 2.5rem;
}
.section_guide-products .guide-products_inner.is-layout-top .guide-products_copy { gap: 2.5rem; }
.section_guide-products .guide-products_inner.is-layout-top .guide-products_list { gap: 0.5rem; }
.section_guide-products .guide-products_inner.is-layout-top .guide-products_row {
  min-height: 6.625rem;
  padding: 1rem 1.25rem 1rem 1rem;
}
.section_guide-products .guide-products_inner.is-layout-top .guide-products_name {
  font-size: 1.25rem;
  font-style: italic;
}
@media (max-width: 991px) {
  .section_guide-products .guide-products_inner.is-layout-split.is-media-left .guide-products_content { padding-left: 2.5rem; padding-right: 0; }
  .section_guide-products .guide-products_inner.is-layout-top .guide-products_layout { gap: 3rem; }
  .section_guide-products .guide-products_inner.is-layout-top .guide-products_content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    justify-content: stretch;
  }
}
@media (max-width: 767px) {
  .section_guide-products .guide-products_inner.is-layout-split.is-media-left .guide-products_media {
    order: 0;
    margin-left: 0;
  }
  .section_guide-products .guide-products_inner.is-layout-split.is-media-left .guide-products_content { padding-left: 0; }
  .section_guide-products .guide-products_inner.is-layout-top .guide-products_layout {
    gap: 2rem;
    padding-top: var(--section-pt-m, 3rem);
    padding-bottom: var(--section-pb-m, 3rem);
  }
  .section_guide-products .guide-products_inner.is-layout-top .guide-products_media {
    aspect-ratio: 4 / 3;
    margin-bottom: 0;
  }
  .section_guide-products .guide-products_inner.is-layout-top .guide-products_content {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .section_guide-products .guide-products_inner.is-layout-top .guide-products_copy { gap: 1.5rem; }
  .section_guide-products .guide-products_inner.is-layout-top .guide-products_row {
    min-height: 5rem;
    padding: 0.625rem 1rem 0.625rem 0.625rem;
  }
  .section_guide-products .guide-products_inner.is-layout-top .guide-products_name { font-size: 1.0625rem; }
}

/* Broschuere Banner: helle Variante (weiße Karte, dunkle Schrift, roter Button) */
.section_brochure .brochure_panel.is-light {
  background-color: var(--color--white);
  color: var(--color--dark);
}
.section_brochure .brochure_panel.is-light .brochure_eyebrow { color: #656d63; }
.section_brochure .brochure_panel.is-light .brochure_heading,
.section_brochure .brochure_panel.is-light .brochure_text { color: var(--color--dark); }
.section_brochure .brochure_panel.is-light .brochure_text { color: #656d63; }
.section_brochure .brochure_panel.is-light .brochure_media { background-color: #f7f7f7; }
.section_brochure .brochure_panel.is-light .button.is-white {
  background-color: var(--color--red);
  border-color: var(--color--red);
  color: var(--color--white);
}
@media (hover: hover) {
  .section_brochure .brochure_panel.is-light .button.is-white:hover {
    background-color: var(--color--red-dark);
    border-color: var(--color--red-dark);
    color: var(--color--white);
  }
}

/* BW-04 Rubrik Produkte Bild links: Einrückung zählt nicht zur Textbreite */
.section_guide-products .guide-products_inner.is-layout-split.is-media-left .guide-products_content {
  max-width: calc(30.3125rem + 8.75rem);
}
@media (max-width: 991px) {
  .section_guide-products .guide-products_inner.is-layout-split.is-media-left .guide-products_content { max-width: none; }
}

/* =============================================================
   162. Kategorie-Kacheln: Schriftgroessen wie Figma 11124-20312
   ============================================================= */
.category-tile {
  padding: 3.0625rem 1.5rem;
  gap: 2rem;
}
.category-tile_icon {
  height: 5.6875rem;
}
.category-tile_content {
  gap: 0.125rem;
}
.category-tile_title {
  font-size: 2rem;
  line-height: 1.66;
  letter-spacing: 0.002em;
}
.category-tile .meta-row {
  column-gap: 0.3125rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color--dark);
  opacity: 0.7;
}
.category-tile .meta-row_dot {
  width: 0.125rem;
  height: 0.125rem;
}
@media (max-width: 767px) {
  .category-tile {
    padding: 1.25rem;
    gap: 1rem;
  }
  .category-tile_icon {
    height: 3.75rem;
    width: 2.75rem;
  }
  .category-tile_content {
    gap: 0;
  }
  .category-tile_title {
    font-size: 1.375rem;
    line-height: 1.66;
    margin-bottom: -0.25rem;
  }
  .category-tile .meta-row {
    font-size: 0.8125rem;
  }
}
/* Kategorie-Kacheln: schon ab 1279px zweispaltig, damit die Kacheln nicht gestaucht wirken */
@media (max-width: 1279px) {
  .category-tiles_grid.grid-auto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .category-tiles_grid.grid-auto {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =============================================================
   163. Section-Abstaende als Tokens (Auswahl statt Regler)
   Fluid zwischen 20rem (320px) und 80rem (1280px) Viewport.
   Sections setzen --section-spacing-top / --section-spacing-bottom
   auf einen Token; die alten Variablen werden daraus gespeist,
   damit Sonderfaelle (Hero-Overlaps usw.) weiter funktionieren.
   ============================================================= */
:root {
  --_spacing---section-space--none: 0rem;
  --_spacing---section-space--tiny: 1.25rem;
  --_spacing---section-space--xxsmall: clamp(1.25rem, calc(1.25rem + 1.25 * (100vw - 20rem) / 60), 2.5rem);
  --_spacing---section-space--xsmall: clamp(2.25rem, calc(2.25rem + 0.875 * (100vw - 20rem) / 60), 3.125rem);
  --_spacing---section-space--small: clamp(3.12rem, calc(3.12rem + 0.63 * (100vw - 20rem) / 60), 3.75rem);
  --_spacing---section-space--medium: clamp(3.125rem, calc(3.125rem + 1.875 * (100vw - 20rem) / 60), 5rem);
  --_spacing---section-space--large: clamp(3.75rem, calc(3.75rem + 2.5 * (100vw - 20rem) / 60), 6.25rem);
  --_spacing---section-space--xlarge: clamp(4.5rem, calc(4.5rem + 3.0 * (100vw - 20rem) / 60), 7.5rem);
  --_spacing---section-space--page-top: clamp(10rem, calc(10rem + 4 * (100vw - 20rem) / 60), 14rem);
}
[style*="--section-spacing-top"] {
  --section-pt: var(--section-spacing-top);
  --section-pt-m: var(--section-spacing-top);
}
[style*="--section-spacing-bottom"] {
  --section-pb: var(--section-spacing-bottom);
  --section-pb-m: var(--section-spacing-bottom);
}

/* 164 – Produkt-Header: USP-Badges aus Metaobjekten (Figma 1265:29091), Icon per Maske in Produktfarbe */
.product-header_usps {
  margin-top: 2rem;
}
.product-header_usp-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
.product-header_usp {
  flex: none;
}
.product-header_usp-icon {
  display: block;
  width: 3.3rem;
  height: 4.5rem;
  background-color: var(--pc, var(--cat--food));
  -webkit-mask: var(--usp-icon) center / contain no-repeat;
  mask: var(--usp-icon) center / contain no-repeat;
}
@media (forced-colors: active) {
  .product-header_usp-icon {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}
@media (max-width: 479px) {
  .product-header_usp-list {
    gap: 0.75rem;
  }
  .product-header_usp-icon {
    width: 2.9rem;
    height: 3.95rem;
  }
}

/* 165 – Anleitung: Video (Autoplay, Loop) mit Pause-Button */
.product-steps_video-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.product-steps_video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-steps_video-toggle {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color--black, #1d1d1b);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.product-steps_video-toggle:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: 0.125rem;
}
@media (hover: hover) {
  .product-steps_video-toggle:hover {
    background-color: #fff;
  }
}
.product-steps_video-icon {
  display: block;
  width: 0.75rem;
  height: 0.875rem;
  background-color: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.product-steps_video-icon.is-pause {
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}
/* Alte Eigenschafts-Blöcke ausblenden, sobald das Produkt eigene USP-Badges hat */
.product-header_usps ~ .product-header_blocks .product-header_icon-item {
  display: none;
}

/* 166 – SEO-Text wie Figma 11124-23324: Text dunkel (#232e20), 16/1.7 Desktop, 14/1.5 Mobil */
.section_seo-text .seo-text_wrap {
  gap: 2rem;
}
.section_seo-text .seo-text_heading {
  color: var(--color--dark);
}
.section_seo-text .seo-text_columns,
.section_seo-text .seo-text_columns p,
.section_seo-text .seo-text_columns li {
  color: var(--color--dark);
}
.section_seo-text .seo-text_columns {
  font-size: 1rem;
  line-height: 1.7;
}
@media (max-width: 479px) {
  .section_seo-text .seo-text_wrap {
    gap: 1rem;
  }
  .section_seo-text .seo-text_columns {
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
  }
}

/* 167 – Social-Media-Popup: Hintergrund wie Sidecards, Weiter/Zurück, dunkle Buttons */
.social-media_modal::backdrop {
  background-color: rgba(35, 46, 32, 0.4);
  -webkit-backdrop-filter: blur(0.15625rem);
  backdrop-filter: blur(0.15625rem);
}
.social-media_modal-close,
.social-media_modal-nav {
  background-color: rgba(35, 46, 32, 0.72);
  color: var(--color--white);
}
.social-media_modal-nav {
  position: fixed;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 1.125rem;
  transform: translateY(-50%);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.social-media_modal-nav[hidden] {
  display: none;
}
.social-media_modal-nav.is-prev {
  left: 1.25rem;
}
.social-media_modal-nav.is-next {
  right: 1.25rem;
}
.social-media_modal-nav:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.125rem;
}
@media (hover: hover) {
  .social-media_modal-close:hover,
  .social-media_modal-nav:hover {
    background-color: var(--color--dark);
  }
}
@media (max-width: 479px) {
  .social-media_modal-nav {
    top: auto;
    bottom: 1.25rem;
    transform: none;
  }
}

/* 168 – Markenwelt mobil: Logo kleiner (Figma 11124-22648, 187 × 60 px) */
@media (max-width: 767px) {
  .brand-world_logo {
    height: 3.775rem;
  }
}

/* 169 – Script-Laufbänder (eigene Sektion + Social Media) immer identisch, Figma 11124-21004
   Desktop: 40 px Handschrift, 53 px Abstand, 70 % Deckkraft. Mobil: 30 px, 22 px Abstand, doppelt so schnell wie der hinterlegte Speed */
.section_script-ticker .script-ticker_item,
.social-media_ticker .script-ticker_item {
  gap: 3.3125rem;
  padding-right: 3.3125rem;
  color: var(--color--dark);
}
.section_script-ticker .script-ticker_item .heading-style-script,
.social-media_ticker .script-ticker_item .heading-style-script {
  font-size: 2.5rem;
  line-height: 1.66;
  letter-spacing: 0.002em;
  opacity: 0.7;
}
.section_script-ticker .script-ticker_dot,
.social-media_ticker .script-ticker_dot {
  width: 0.375rem;
  height: 0.375rem;
}
@media (max-width: 767px) {
  .section_script-ticker .script-ticker_item,
  .social-media_ticker .script-ticker_item {
    gap: 1.375rem;
    padding-right: 1.375rem;
  }
  .section_script-ticker .script-ticker_item .heading-style-script,
  .social-media_ticker .script-ticker_item .heading-style-script {
    font-size: 1.875rem;
  }
  .section_script-ticker .script-ticker_track,
  .social-media_ticker .script-ticker_track {
    animation-duration: calc(var(--ticker-speed, 40s) / 1.5);
  }
}

/* 170 Rubriken-Slider: Farbflaeche, solange ein Beitrag kein Bild hat */
.guide-slider_card {
  background-color: var(--color--dark, #232e20);
}

/* 171 Rubriken-Slider: Kartentext breiter */
.guide-slider_body {
  max-width: 30rem;
}
.guide-slider_text {
  max-width: 26rem;
}
@media (max-width: 767px) {
  .guide-slider_body {
    max-width: none;
  }
  .guide-slider_text {
    max-width: none;
  }
}

/* 172 Rubriken-Slider mobil: Verlauf oben fuer die Handschrift, unten dunkler */
@media (max-width: 767px) {
  .guide-slider_overlay {
    background-image: linear-gradient(180deg, rgba(20, 24, 20, 0.6) 0%, rgba(20, 24, 20, 0.3) 18%, rgba(20, 24, 20, 0) 34%),
      linear-gradient(0deg, rgba(20, 24, 20, 0.85) 0%, rgba(20, 24, 20, 0.68) 40%, rgba(20, 24, 20, 0.25) 62%, rgba(20, 24, 20, 0) 78%);
  }
}

/* 173 Laufbaender: gleiche Geschwindigkeit in px/s, egal wie lang der Text ist
   (--ticker-scale = Breite einer Textgruppe / 100rem, gesetzt per Skript) */
.script-ticker_track {
  animation-duration: calc(var(--ticker-speed, 40s) * var(--ticker-scale, 1));
}
@media (max-width: 767px) {
  .section_script-ticker .script-ticker_track,
  .social-media_ticker .script-ticker_track {
    animation-duration: calc(var(--ticker-speed, 40s) * var(--ticker-scale, 1) / 1.5);
  }
}

/* 174 – Produkt-Header: USP-Badges direkt unter Kauf-/Händler-Buttons (Flex-Order wie Buttons, DOM-Reihenfolge danach) */
.product-header_usps {
  order: 5;
  flex: 0 0 100%;
}

/* 175 – Navigation: Shop-Icons mit grosser Klick-/Hover-Flaeche wie die Menue-Links
   (volle Nav-Hoehe, seitlicher Innenabstand statt Gap; Abstaende optisch unveraendert) */
.nav_shop-icons {
  gap: 0;
  margin-right: -0.375rem;
  align-self: stretch;
}
.nav_search-holder,
.nav_account,
.nav_cart-holder {
  align-self: stretch;
  align-items: stretch;
}
.nav_shop-icon {
  width: auto;
  height: auto;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  align-self: stretch;
}
.nav_shop-icon .nav_shop-quantity {
  top: calc(50% - 1rem);
  right: 0;
}
.nav_shop-icon:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: -0.125rem;
}
@media (max-width: 991px) {
  .nav_shop-icons {
    margin-right: 0;
  }
  .nav_shop-icon {
    width: 1.5rem;
    height: 1.5rem;
    min-height: 0;
    padding: 0;
    align-self: center;
  }
  .nav_shop-icon .nav_shop-quantity {
    top: -0.25rem;
    right: -0.375rem;
  }
  /* Unsichtbar vergroesserte Trefferflaeche, ohne das Layout neben dem Logo zu verschieben */
  .nav_shop-icon::before {
    content: "";
    position: absolute;
    inset: -0.625rem -0.375rem;
  }
}


/* 176 – Basenwelt-Karten: Verlauf von oben (wie Rubriken Slider mobil) plus leicht von links,
   damit die Handschrift oben links auf hellen Bildern lesbar bleibt */
.section_guide-cards .guide-card_media::after,
.section_guide-index .guide-card_media::after,
.section_guide-topics .guide-card_media::after,
.section_guide-posts .guide-card_media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(20, 24, 20, 0.6) 0%, rgba(20, 24, 20, 0.3) 28%, rgba(20, 24, 20, 0) 55%),
    linear-gradient(90deg, rgba(20, 24, 20, 0.25) 0%, rgba(20, 24, 20, 0) 50%);
  pointer-events: none;
}
.section_guide-cards .guide-card_label,
.section_guide-index .guide-card_label,
.section_guide-topics .guide-card_label,
.section_guide-posts .guide-card_label {
  z-index: 1;
}

/* 177 – Leere Bildplaetze ausblenden: ohne gesetztes Bild keine graue Flaeche,
   das Layout rueckt zusammen */
.section_guide-split .guide-split_inner:not(:has(.guide-split_img)) .guide-split_media { display: none; }
.section_guide-split .guide-split_inner:not(:has(.guide-split_img)) .guide-split_layout {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}
.section_guide-split .guide-split_inner:not(:has(.guide-split_img)) .guide-split_content {
  padding-left: max(var(--gs-edge), (100% - 80rem) / 2);
  padding-right: max(var(--gs-edge), (100% - 80rem) / 2);
}
.section_guide-variants .guide-variants_card:not(:has(.guide-variants_img)) { grid-template-columns: minmax(0, 1fr); }
.section_guide-variants .guide-variants_card:not(:has(.guide-variants_img)) .guide-variants_media { display: none; }
.section_guide-variants .guide-variants_slide:not(:has(.guide-variants_img)) { width: 32.6875rem; }
.section_guide-intro .guide-intro_img-item:not(:has(img)) { display: none; }
.section_guide-intro .guide-intro_gallery:not(:has(img)) { display: none; }
@media (max-width: 767px) {
  .section_guide-split .guide-split_inner:not(:has(.guide-split_img)) .guide-split_content {
    padding: var(--section-pt-m, 3rem) var(--space--20) var(--section-pb-m, 3rem);
  }
  .section_guide-variants .guide-variants_slide:not(:has(.guide-variants_img)) { width: 85vw; }
}

/* 178 – Footer mobil: der Abstand unter "Mein Account" (margin-bottom) lief aus dem
   grauen Bereich heraus (Margin-Collapse) und erschien als weisser Streifen */
@media (max-width: 767px) {
  .footer_columns-bg { display: flow-root; }
}

/* 179 – Navigation rechts (Basenwelten, Blog, Rezepte): volle Header-Hoehe als
   Klick-/Fokusflaeche wie links (nav_right zentriert sonst auf Texthoehe) */
.nav_menu.is-right { align-self: stretch; }

/* 180 – Broschuere, Variante Hell: EIN fertig gestaltetes Bild (z. B. aufgeschlagene
   Broschuere, Figma 17-40834) fuellt die Bildflaeche vollstaendig, ohne Zuschnitt
   und ohne eigenen Schatten. Variante Farbig (Produktseite) bleibt das Cover. */
.section_brochure .brochure_panel.is-light .brochure_cover {
  width: 100%;
  height: 100%;
  padding: 2.9375rem 3.8125rem;
  box-shadow: none;
}
.section_brochure .brochure_panel.is-light .brochure_cover-img {
  object-fit: contain;
}
@media (max-width: 767px) {
  .section_brochure .brochure_panel.is-light .brochure_cover { padding: 1.5rem; }
}

/* 181 – Rubrik Split: Textspalte und Linkkarte wie Figma 1023-42530
   (Spalte 430px, Karte 26/24px Innenabstand, Uebertitel 17px, Titel 20px) */
.section_guide-split .guide-split_copy,
.section_guide-split .guide-split_titles,
.section_guide-split .guide-split_blocks {
  max-width: 26.875rem;
}
.section_guide-split .guide-split_lc-heading { margin-bottom: 0.75rem; }
.section_guide-split .guide-split_lc {
  gap: 2.5rem;
  padding: 1.25rem 1.5rem 1.25rem 1.625rem;
}
.section_guide-split .guide-split_lc-copy { gap: 0.5rem; }
.section_guide-split .guide-split_lc-eyebrow {
  font-size: 1.0625rem;
  line-height: 1.2;
}
.section_guide-split .guide-split_lc-title {
  line-height: 1.2;
  letter-spacing: 0.02em;
}
@media (max-width: 767px) {
  .section_guide-split .guide-split_copy,
  .section_guide-split .guide-split_titles,
  .section_guide-split .guide-split_blocks { max-width: none; }
  .section_guide-split .guide-split_lc { gap: 1.25rem; padding: 1rem 1.25rem; }
  .section_guide-split .guide-split_lc-eyebrow { font-size: 0.9375rem; }
}
/* Linkkarte ohne Link wird nicht ausgegeben: leeren Block samt Abstand ausblenden */
.section_guide-split .guide-split_block.is-linkcard:not(:has(.guide-split_lc)) { display: none; }

/* ---------- 182. Split Banner: Bild liegt im li-guard-Span, daher greift `> img` nicht und das Bild bestimmt die Höhe. Bild absolut, Höhe kommt vom Panel (Figma 517 px) ---------- */
.split-banner_media .media-frame_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 183. Newsroom Pressekit ohne Downloadbereich: Kontakt-Karte quer (Figma 1064-10913) ---------- */
.section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] {
  grid-template-columns: minmax(0, 1fr);
}
.section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] .newsroom-kit_card {
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}
.section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] .newsroom-kit_body {
  gap: 1.75rem;
  width: 27.4375rem;
  max-width: 100%;
}
.section_newsroom-kit .newsroom-kit_titles {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.section_newsroom-kit .newsroom-kit_eyebrow {
  color: #656d63;
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
.section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] .newsroom-kit_title {
  font-size: 2.25rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] .newsroom-kit_text {
  margin-top: -1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] .newsroom-kit_visual {
  flex: 0 1 30.9375rem;
  gap: 1.25rem;
}
.section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] .newsroom-kit_circle {
  width: 9rem;
  height: 9rem;
}
.section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] .newsroom-kit_bubble {
  padding: 1.0625rem 1.25rem;
  border-radius: 0.375rem;
}
.section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] .newsroom-kit_bubble::before {
  left: -0.75rem;
  border-top-width: 0.75rem;
  border-bottom-width: 0.75rem;
  border-right-width: 0.8125rem;
}
.section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] .newsroom-kit_name {
  font-size: 1.5rem;
}
.section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] .newsroom-kit_role {
  font-size: 1.125rem;
}
@media (max-width: 991px) {
  .section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] .newsroom-kit_card {
    flex-direction: column;
    align-items: flex-start;
  }
  .section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] .newsroom-kit_visual {
    flex: none;
  }
}
@media (max-width: 767px) {
  .section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] .newsroom-kit_title {
    font-size: 1.75rem;
  }
  .section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] .newsroom-kit_circle {
    width: 5.5rem;
    height: 5.5rem;
  }
  .section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] .newsroom-kit_name {
    font-size: 1.125rem;
  }
  .section_newsroom-kit .newsroom-kit_grid[data-downloads="false"] .newsroom-kit_role {
    font-size: 0.875rem;
  }
}


/* Selektoren mit .product-header_gallery, damit das nachgeladene Swiper-CSS (.swiper { position: relative }) nicht gewinnt */
/* ---------- 185. PDP-Galerie (Figma 11126-19541 / mobil 11298-23999): Hauptbild füllt die ganze Kachel (contain), Thumbs liegen unten über dem Bild ---------- */
.product-header_gallery {
  position: relative;
}
.product-header_gallery .product-header_main-swiper {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product-header_main-swiper > .swiper-wrapper {
  height: 100%;
}
.product-header_main-slide {
  height: 100%;
}
.product-header_main-img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
}
.product-header_gallery .product-header_thumb-swiper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  z-index: 2;
  margin: 0;
}
@media (max-width: 767px) {
  .product-header_gallery {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
  .product-header_gallery .product-header_thumb-swiper {
    bottom: 1.0625rem;
    margin: 0;
  }
  .product-header_thumb.swiper-slide {
    width: 3.125rem;
    height: 3.125rem;
  }
}

/* ---------- 186. Sidecards Ergiebigkeit (Figma 5-21474) und Zertifizierungen (Figma 5-21496) ---------- */
.sidecard .yield-table {
  display: flex;
  flex-direction: column;
  margin-top: var(--space--12);
  overflow: hidden;
  border-radius: 0.625rem;
}
.sidecard .yield-table_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: var(--space--16) 1.5rem;
}
.sidecard .li-guard:nth-child(odd) > .yield-table_row {
  background-color: rgba(188, 188, 188, 0.1);
}
.sidecard .yield-table_text {
  flex: 1 1 auto;
  min-width: 0;
  color: #656d63;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.sidecard .yield-table_amount {
  flex: none;
  color: var(--color--dark);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.sidecard .yield-table_note {
  margin: var(--space--12) 0 0;
  color: #656d63;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.sidecard .cert-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: var(--space--12);
}
.sidecard .cert-list_item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.sidecard .cert-list_media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 8rem;
  height: 5.3125rem;
}
.sidecard .cert-list_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sidecard .cert-list_body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-width: 0;
}
.sidecard .cert-list_title {
  margin: 0;
  color: var(--color--dark);
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
.sidecard .cert-list_text,
.sidecard .cert-list_text p {
  margin: 0;
  color: #656d63;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
@media (max-width: 767px) {
  .sidecard .yield-table_row {
    padding: var(--space--12) var(--space--16);
  }
  .sidecard .cert-list_item {
    gap: 1rem;
  }
  .sidecard .cert-list_media {
    width: 5.5rem;
    height: 3.75rem;
  }
}

/* ---------- 187. Produkt-Header: USP-Badges etwas größer, damit die Schrift im Badge lesbar ist ---------- */
.product-header_usp-icon {
  width: 4rem;
  height: 5.45rem;
}
@media (max-width: 479px) {
  .product-header_usp-icon {
    width: 3.4rem;
    height: 4.65rem;
  }
}

/* ---------- 188. Produkt Zutaten: Icon je Kategorie aus Kollektions-Metafeld ingredients_icon, per Maske in Produktfarbe ---------- */
.ingredients-info_icon.is-custom {
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--ing-icon) center / contain no-repeat;
  mask: var(--ing-icon) center / contain no-repeat;
}
@media (forced-colors: active) {
  .ingredients-info_icon.is-custom {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}

/* ---------- 189. PDP: Kategoriefarbe (Kollektions-Metafeld theme_color) in allen Produkt-Sektionen ---------- */
.section_ingredients .section_inner,
.section_product-why .section_inner,
.section_product-steps .section_inner,
.section_yield .section_inner,
.section_product-faq .section_inner {
  --pc: var(--product-color, var(--cat--food));
}
.product-why_panel {
  background-color: var(--pc, var(--cat--food));
}

/* ---------- 190. Produkt-Story: Seitenverhältnis als Mindesthöhe, Karten wachsen mit längerem Text ---------- */
.product-header_story-row {
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
}
.product-header_story-media.is-wide {
  height: auto;
  aspect-ratio: 657 / 640;
}
.product-header_story-row:has(.product-header_story-media.is-wide) {
  aspect-ratio: auto;
}
@media (max-width: 767px) {
  .product-header_story-row,
  .product-header_story-row:has(.product-header_story-media.is-wide) {
    aspect-ratio: auto;
  }
  .product-header_story-track .product-header_story-panel,
  .product-header_story-track .product-header_story-media,
  .product-header_story-track .product-header_story-media.is-wide {
    height: auto;
    aspect-ratio: 4 / 5;
  }
}

/* ---------- 191. Collection Hero: Überschrift wie Figma max. 698px (zweizeilig), Regler "Breite Überschrift" überschreibt ---------- */
.collection-hero_content .u-text-width.is-heading > .collection-hero_heading {
  max-width: 43.625rem;
}

/* ---------- 192. Collection Products: Filter ohne Neuladen, Ladezustand ---------- */
.collection-products_paginate {
  transition: opacity 0.2s ease;
}
.collection-products_paginate.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- 200. Einheitliche Listen-Dropdowns (lf-dd) nach Vorbild Collection Products: graue Pille, roter Wert + Pfeil, weisses Panel ---------- */
.lf-dd {
  position: relative;
  display: inline-flex;
  flex: none;
  min-width: 0;
}
.lf-dd[hidden] {
  display: none;
}
.lf-dd_toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  min-height: 2.625rem;
  margin: 0;
  padding: 0.75rem 1.5rem;
  border: 0.0625rem solid transparent;
  border-radius: var(--radius--pill);
  background-color: var(--color--grey);
  color: var(--color--dark);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition--fast), border-color var(--transition--fast), color var(--transition--fast);
}
.is-theme-grey .lf-dd_toggle {
  border-color: var(--border-color--primary);
  background-color: var(--color--white);
}
.lf-dd_label {
  min-width: 0;
}
.lf-dd.is-active .lf-dd_label::after {
  content: ":";
}
.lf-dd_value,
.lf-dd_count {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color--red);
}
.lf-dd_value:empty,
.lf-dd_count:empty {
  display: none;
}
.lf-dd_icon {
  display: inline-flex;
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.125rem;
  color: var(--color--red);
  font-size: 0.75rem;
  transition: transform var(--transition--fast);
}
.lf-dd_icon .icon-svg {
  width: 100%;
  height: 100%;
}
.lf-dd.is-open .lf-dd_icon {
  transform: rotate(180deg);
}
/* Geoeffneter Filter (nicht Sortierung): Pille dunkelgruen wie in Collection Products */
.lf-dd.is-open:not(.is-sort) > .lf-dd_toggle {
  border-color: var(--color--green);
  background-color: var(--color--green);
  color: var(--color--white);
}
.lf-dd.is-open:not(.is-sort) > .lf-dd_toggle .lf-dd_icon,
.lf-dd.is-open:not(.is-sort) > .lf-dd_toggle .lf-dd_value,
.lf-dd.is-open:not(.is-sort) > .lf-dd_toggle .lf-dd_count {
  color: var(--color--white);
}
.lf-dd_toggle:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
.lf-dd_panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: max(100%, 13.75rem);
  max-width: calc(100vw - 2.5rem);
  max-height: 20rem;
  margin: 0;
  padding: 0.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  border-radius: 0.75rem;
  background-color: var(--color--white);
  color: var(--color--dark);
  box-shadow: 0 0.25rem 3.8125rem rgba(0, 0, 0, 0.12);
  text-align: left;
}
.lf-dd_panel[hidden] {
  display: none;
}
.lf-dd.is-end .lf-dd_panel,
.lf-dd.is-flip .lf-dd_panel {
  left: auto;
  right: 0;
}
.lf-dd.is-end.is-flip .lf-dd_panel {
  left: 0;
  right: auto;
}
.lf-dd_panel > li,
.lf-dd_panel > .li-guard > li {
  display: block;
  margin: 0;
  padding: 0;
}
.lf-dd_option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.625rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background-color: transparent;
  color: var(--color--dark);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition--fast), color var(--transition--fast);
}
.lf-dd_option[hidden] {
  display: none;
}
.lf-dd_option[aria-pressed="true"],
.lf-dd_option[aria-current="true"],
.lf-dd_option[aria-current="page"] {
  background-color: var(--color--grey);
  color: var(--color--red);
  font-weight: 600;
}
.lf-dd_option:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: -0.125rem;
}
@media (hover: hover) {
  .lf-dd_toggle:hover {
    background-color: var(--color--grey-dark);
    color: var(--color--dark);
  }
  .is-theme-grey .lf-dd_toggle:hover {
    border-color: var(--border-color--primary);
  }
  .lf-dd.is-open:not(.is-sort) > .lf-dd_toggle:hover {
    border-color: var(--color--green-dark);
    background-color: var(--color--green-dark);
    color: var(--color--white);
  }
  .lf-dd_option:hover {
    background-color: var(--color--grey);
  }
}
@media (max-width: 767px) {
  .lf-dd_panel {
    max-width: calc(100vw - 2rem);
  }
  .lf-dd_option {
    white-space: normal;
  }
}

/* Gemeinsam: Ladezustand beim Nachladen per Section Rendering API, "Mehr laden" */
.lf-list-loading {
  transition: opacity 0.2s ease;
}
.lf-list-loading.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
.lf-more {
  display: flex;
  justify-content: center;
}
.lf-more[hidden] {
  display: none;
}
.lf-more .button.is-loading,
.lf-more .button[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}

/* ---------- 201. Listen-Toolbars mit lf-dd: Mobil volle Breite, Pfeil rechts (Newsroom, Blog, Rezepte, Termine, Stellen, Suche) ---------- */
.section_event-index .event-index_toolbar > .lf-dd,
.section_blog-index .blog-index_tools > .lf-dd {
  flex: none;
}
.section_blog-index .blog-index_sort .lf-dd_toggle,
.section_event-index .event-index_sort-dd .lf-dd_toggle,
.section_search .search_sort-dd .lf-dd_toggle,
.section_jobs-list .jobs-list_dd .lf-dd_toggle {
  min-height: 3.125rem;
}
.section_blog-index .blog-index_more,
.section_search .search_more,
.section_event-index .event-index_more {
  margin-top: 3.75rem;
}
@media (max-width: 767px) {
  .section_newsroom-index .newsroom-index_filters {
    align-items: stretch;
  }
  .section_newsroom-index .newsroom-index_filter-group {
    flex-wrap: nowrap;
    width: 100%;
  }
  .section_newsroom-index .newsroom-index_filter-group > .lf-dd {
    flex: 1 1 0;
  }
  .section_recipe-index .recipe-index_filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .section_jobs-list .jobs-list_filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .section_newsroom-index .newsroom-index_filters .lf-dd,
  .section_blog-index .blog-index_tools .lf-dd,
  .section_recipe-index .recipe-index_tools .lf-dd,
  .section_event-index .event-index_toolbar .lf-dd,
  .section_jobs-list .jobs-list_toolbar .lf-dd,
  .section_search .search_tools .lf-dd {
    align-self: stretch;
    width: 100%;
  }
  .section_newsroom-index .newsroom-index_filters .lf-dd_toggle,
  .section_blog-index .blog-index_tools .lf-dd_toggle,
  .section_recipe-index .recipe-index_tools .lf-dd_toggle,
  .section_event-index .event-index_toolbar .lf-dd_toggle,
  .section_jobs-list .jobs-list_toolbar .lf-dd_toggle,
  .section_search .search_tools .lf-dd_toggle {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1.25rem;
  }
  .section_newsroom-index .newsroom-index_filters .lf-dd_icon,
  .section_blog-index .blog-index_tools .lf-dd_icon,
  .section_recipe-index .recipe-index_tools .lf-dd_icon,
  .section_event-index .event-index_toolbar .lf-dd_icon,
  .section_jobs-list .jobs-list_toolbar .lf-dd_icon,
  .section_search .search_tools .lf-dd_icon {
    margin-left: auto;
  }
  .section_blog-index .blog-index_more,
  .section_search .search_more,
  .section_event-index .event-index_more {
    margin-top: 2.5rem;
  }
  .section_blog-index .blog-index_more-button,
  .section_search .search_more-button,
  .section_event-index .event-index_more-button {
    width: 100%;
  }
}

/* ---------- 202. FAQ: Filter-Buttons und Gruppen liegen jetzt in li-guard-Wrappern (Converter verlor sonst data-/id-Attribute), :first-child/:last-child neu setzen ---------- */
.section_faq .faq_filter > .li-guard > .faq_filter-button:first-child {
  min-width: 6.75rem;
}
.section_faq .faq_groups > .li-guard > .faq_group:last-child {
  margin-bottom: 6.25rem;
}
.section_faq .faq_groups > .li-guard:last-child > .faq_group {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .section_faq .faq_filter > .li-guard > .faq_filter-button:first-child {
    min-width: 0;
  }
  .section_faq .faq_groups > .li-guard > .faq_group:last-child {
    margin-bottom: 3rem;
  }
  .section_faq .faq_groups > .li-guard:last-child > .faq_group {
    margin-bottom: 0;
  }
}

/* ---------- 203. FAQ: Gruppenabstand Tablet (ergaenzt 202, Reihenfolge der Breakpoints) ---------- */
@media (max-width: 991px) {
  .section_faq .faq_groups > .li-guard > .faq_group:last-child {
    margin-bottom: 4rem;
  }
  .section_faq .faq_groups > .li-guard:last-child > .faq_group {
    margin-bottom: 0;
  }
}
@media (max-width: 767px) {
  .section_faq .faq_groups > .li-guard > .faq_group:last-child {
    margin-bottom: 3rem;
  }
  .section_faq .faq_groups > .li-guard:last-child > .faq_group {
    margin-bottom: 0;
  }
}

/* ---------- 204. lf-dd: lange Label + Wert in schmalen Pillen kuerzen statt ueberlappen ---------- */
.lf-dd_label {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lf-dd_value,
.lf-dd_count {
  flex: 0 1 auto;
}

/* ---------- 205. lf-dd: in schmalen Pillen zuerst den Wert kuerzen, das Label bleibt lesbar ---------- */
.lf-dd_value,
.lf-dd_count {
  flex-shrink: 1000;
}
.lf-dd_label {
  flex-shrink: 0;
  max-width: calc(100% - 1.5rem);
}

/* ---------- 206. Mobil: Filter-Pillen nach Inhalt breit, umbrechen statt Werte abzuschneiden (Newsroom, Rezepte, Stellen) ---------- */
@media (max-width: 767px) {
  .section_newsroom-index .newsroom-index_filter-group,
  .section_recipe-index .recipe-index_filters,
  .section_jobs-list .jobs-list_filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .section_newsroom-index .newsroom-index_filter-group > .lf-dd,
  .section_recipe-index .recipe-index_filters > .lf-dd,
  .section_jobs-list .jobs-list_filters > .lf-dd {
    flex: 1 1 auto;
    width: auto;
  }
}

/* ---------- 193. Über uns Werte (Figma 916-14247): Karten-Texte linksbündig, Handschrift-Label links wie der Textblock ---------- */
.about-values_card {
  text-align: left;
}
.about-values_label {
  justify-content: flex-start;
  padding-left: 3.25rem;
}
.about-values_label-bg {
  left: 3.25rem;
  transform: none;
}
.about-values_script {
  margin-left: 1rem;
}
.about-values_body {
  align-items: flex-start;
  max-width: none;
  margin: 0;
  padding-left: 3.25rem;
  padding-right: 3.25rem;
}
@media (max-width: 767px) {
  .about-values_label,
  .about-values_body {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .about-values_label-bg {
    left: 1.5rem;
  }
}

/* ---------- 194. Über uns: Die drei Gebote (Figma 916-14086), Bild vollflächig, Panel rechts mit Glas-Effekt ---------- */
.section_about-rules .about-rules_inner {
  position: relative;
  overflow: hidden;
  color: var(--color--white);
}
.about-rules_media,
.about-rules_overlay {
  position: absolute;
  inset: 0;
}
.about-rules_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 40%;
}
.about-rules_overlay {
  background-image: linear-gradient(100deg, rgba(26, 50, 20, 0) 9%, rgba(16, 31, 18, 0.12) 41%, rgba(15, 29, 18, 0.14) 49%, rgba(15, 28, 18, 0.14) 56%);
}
.about-rules_layout {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 62.5rem;
  padding: 4.625rem 0;
}
.about-rules_panel-wrap {
  position: relative;
  width: 36.5rem;
  max-width: 100%;
}
.about-rules_panel-wrap::before {
  content: "";
  position: absolute;
  top: -0.625rem;
  bottom: -0.625rem;
  left: -0.625rem;
  right: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-right: 0;
  border-radius: 0.9375rem 0 0 0.9375rem;
  pointer-events: none;
}
.about-rules_panel-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 0.625rem);
  width: 11.6875rem;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
.about-rules_panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75rem;
  min-height: 53.0625rem;
  padding: 4.4375rem 3.75rem;
  border-radius: 0.9375rem;
  background-color: rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(4.8125rem);
  backdrop-filter: blur(4.8125rem);
  text-align: center;
}
.about-rules_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 29rem;
}
.about-rules_logo-svg {
  display: block;
  width: 12.125rem;
  height: auto;
  color: var(--color--white);
}
.about-rules_title {
  margin: 0;
  color: var(--color--white);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.about-rules_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 26.0625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-rules_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
}
.about-rules_list > .li-guard + .li-guard .about-rules_item::before,
.about-rules_item + .about-rules_item::before {
  content: "";
  display: block;
  width: 1px;
  height: 2.6875rem;
  margin: 0.875rem 0 1.5rem;
  background-color: rgba(255, 255, 255, 0.3);
}
.about-rules_num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.8125rem;
  height: 2.8125rem;
  padding: 0 1.1rem;
  border-radius: 5.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  font-family: var(--font--script, "Ms Madi"), cursive;
  font-size: 2.2rem;
  line-height: 1.66;
}
.about-rules_text {
  display: block;
  color: var(--color--white);
  font-size: 2.5rem;
  line-height: 1.66;
  letter-spacing: 0.002em;
}
@media (max-width: 991px) {
  .about-rules_layout {
    justify-content: center;
    min-height: 0;
    padding: 6rem 0;
  }
  .about-rules_panel-wrap::after {
    display: none;
  }
  .about-rules_panel {
    min-height: 0;
  }
}
@media (max-width: 767px) {
  .about-rules_layout {
    padding: 3rem 0;
  }
  .about-rules_panel-wrap::before {
    display: none;
  }
  .about-rules_panel {
    gap: 2.5rem;
    padding: 3rem 1.5rem;
    background-color: rgba(0, 0, 0, 0.36);
  }
  .about-rules_logo-svg {
    width: 9.5rem;
  }
  .about-rules_title {
    font-size: 1.0625rem;
  }
  .about-rules_num {
    min-width: 2.375rem;
    height: 2.375rem;
    font-size: 1.75rem;
  }
  .about-rules_text {
    font-size: 1.875rem;
  }
  .about-rules_item + .about-rules_item::before,
  .about-rules_list > .li-guard + .li-guard .about-rules_item::before {
    height: 1.75rem;
    margin: 0.5rem 0 1rem;
  }
}

/* ---------- 195. Intro Text: Stil "Übertitel + H2" und Verlaufshintergrund (Über uns, Figma 2-3595) ---------- */
.section_intro-text .section_inner[data-bg="gradient"] {
  background-color: #f7f7f7;
  background-image: linear-gradient(179deg, #f7f7f7 2%, #ffffff 61%, #f7f7f7 116%);
}
.intro-text_wrap[data-style="eyebrow"] {
  gap: 0;
}
.intro-text_wrap[data-style="eyebrow"] .intro-text_script {
  margin-bottom: 1.25rem;
  color: #656d63;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0;
  opacity: 1;
}
.intro-text_wrap[data-style="eyebrow"] .intro-text_heading {
  margin: 0 0 1.5rem;
  color: var(--color--dark, #232e20);
  font-size: var(--font-size--h2, 2.25rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.intro-text_wrap[data-style="eyebrow"] .intro-text_text,
.intro-text_wrap[data-style="eyebrow"] .intro-text_text p {
  color: #656d63;
  font-size: 1rem;
  line-height: 1.7;
}
@media (max-width: 767px) {
  .intro-text_wrap[data-style="eyebrow"] .intro-text_script {
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
  }
  .intro-text_wrap[data-style="eyebrow"] .intro-text_heading {
    margin-bottom: 1rem;
  }
  .intro-text_wrap[data-style="eyebrow"] .intro-text_text,
  .intro-text_wrap[data-style="eyebrow"] .intro-text_text p {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}

/* ---------- 196. Zertifikate-Slider (Figma 2-5318): Karten laufen rechts bis zum Bildschirmrand, Schatten nicht abgeschnitten.
   Swiper setzt .swiper { overflow: hidden } und schneidet damit am Container ab; stattdessen clip-path (links bündig, rechts/oben/unten Luft)
   und das section_inner (volle Breite, overflow hidden) begrenzt am Viewport. ---------- */
.is-layout-slider .certificates_track,
.is-layout-slider .certificates_track.swiper {
  overflow: visible;
  clip-path: inset(-5rem -100vw -5rem 0);
}
.certificates_inner.is-layout-slider {
  overflow: hidden;
  overflow: clip;
}
@media (max-width: 991px) {
  .is-layout-slider .certificates_track,
  .is-layout-slider .certificates_track.swiper {
    clip-path: inset(-5rem -100vw -5rem -100vw);
  }
}

/* ---------- 197. Über uns: Die drei Gebote – Feinschliff (Figma 916-14087)
   Zahlen-Kreise rund, Verbindungslinie zum Bild unter 1100px aus, Tablet/Mobil: Bild oben (Herr Jentschura sichtbar), Gebote darunter ---------- */
.about-rules_num {
  width: 2.8125rem;
  min-width: 0;
  height: 2.8125rem;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
  flex: none;
}
@media (max-width: 1100px) {
  .about-rules_panel-wrap::after {
    display: none;
  }
}
@media (max-width: 991px) {
  .section_about-rules .about-rules_inner {
    background-color: #3d4030;
  }
  .about-rules_media {
    bottom: auto;
    height: min(125vw, 40rem);
  }
  .about-rules_img {
    object-position: 12% 40%;
  }
  .about-rules_overlay {
    background-image: linear-gradient(180deg, rgba(61, 64, 48, 0) 55%, rgba(61, 64, 48, 0.85) 90%, #3d4030 100%);
  }
  .about-rules_layout {
    justify-content: center;
    padding: calc(min(125vw, 40rem) - 4rem) 0 4rem;
  }
}
@media (max-width: 767px) {
  .about-rules_layout {
    padding: calc(min(125vw, 40rem) - 3rem) 0 3rem;
  }
  .about-rules_panel {
    background-color: rgba(0, 0, 0, 0.2);
  }
  .about-rules_num {
    width: 2.375rem;
    min-width: 0;
    height: 2.375rem;
  }
}

/* ---------- 198. Markenwelt Tabs mobil: Container bleibt Pille wie die Tabs (Rundungen passen zusammen) ---------- */
@media (max-width: 767px) {
  .is-layout-tabs .brand-world_tabs {
    flex-wrap: nowrap;
    max-width: 100%;
    border-radius: var(--radius--pill);
  }
  .brand-world_tab {
    flex: 0 1 auto;
    min-width: 0;
  }
}

/* ---------- 199. Meilensteine: "Weiterlesen" öffnet Seitenpanel rechts (Figma 1997-46709, Frame 5:5449) ---------- */
button.milestones-slider_more {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
button.milestones-slider_more:focus-visible,
.milestones-drawer_close:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.25rem;
}
html.is-drawer-open {
  overflow: hidden;
}
.milestones-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: 32.375rem;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--color--white);
  color: var(--color--dark);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.milestones-drawer[open] {
  animation: milestones-drawer-in 0.35s ease-out;
}
.milestones-drawer::backdrop {
  background-color: rgba(35, 46, 32, 0.4);
}
@keyframes milestones-drawer-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .milestones-drawer[open] {
    animation: none;
  }
}
.milestones-drawer_panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  min-height: 100%;
  padding: 3.75rem 3.75rem 4rem;
}
.milestones-drawer_close {
  position: absolute;
  top: 1.125rem;
  right: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #f6f4f3;
  color: var(--color--dark);
  cursor: pointer;
}
.milestones-drawer_close-icon {
  width: 0.875rem;
  height: 0.875rem;
}
@media (hover: hover) {
  .milestones-drawer_close:hover {
    background-color: #ebe8e6;
  }
}
.milestones-drawer_media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 21rem;
  padding: 2.75rem 3.3rem;
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  box-shadow: 0 0.153rem 1.167rem rgba(0, 0, 0, 0.06);
}
.milestones-drawer_media .li-guard {
  display: contents;
}
.milestones-drawer_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.milestones-drawer_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}
.milestones-slider_badge.milestones-drawer_badge {
  padding: 0.375rem 1.25rem 0.25rem;
  font-size: var(--font-size--h6);
  letter-spacing: 0;
}
.milestones-drawer_copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.milestones-drawer_title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.milestones-drawer_text,
.milestones-drawer_text p {
  color: #656d63;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.milestones-drawer_text p + p {
  margin-top: 1rem;
}
.milestones-drawer_text a {
  color: var(--color--dark);
  font-weight: 600;
  text-decoration: underline;
}
@media (max-width: 767px) {
  .milestones-drawer {
    width: 100%;
  }
  .milestones-drawer_panel {
    gap: 2rem;
    padding: 3.5rem 1.25rem 3rem;
  }
  .milestones-drawer_media {
    height: 15rem;
    padding: 1.5rem;
  }
}

/* ---------- 200b. Broschüre-Banner: Cover-Bild öffnet ebenfalls das Modal ---------- */
.section_brochure .brochure_media.is-clickable {
  cursor: pointer;
}
.section_brochure .brochure_media.is-clickable .brochure_cover {
  transition: transform var(--transition--fast, 0.2s ease);
}
@media (hover: hover) {
  .section_brochure .brochure_media.is-clickable:hover .brochure_cover {
    transform: scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .section_brochure .brochure_media.is-clickable .brochure_cover {
    transition: none;
  }
}

/* ---------- 200c. Karriere-Banner (Über uns): weißer Kasten links am Textanfang statt mittig unter dem Schriftzug ---------- */
.section_career-banner .career-banner_label-bg {
  left: 0;
  transform: none;
}

/* ---------- 207. lf-dd: Label nie kuerzen (keine "..."), nur der gewaehlte Wert darf kuerzen.
   Doppelpunkt direkt am Label: kommt jetzt vor dem Wert, damit kein Leerzeichen aus dem Label-Text davor steht ---------- */
.lf-dd_label {
  flex: none;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}
.lf-dd.is-active .lf-dd_label::after {
  content: none;
}
.lf-dd.is-active .lf-dd_value:not(:empty)::before {
  content: ":";
  margin-left: -0.25rem;
  margin-right: 0.25rem;
  color: var(--color--dark);
}

/* ---------- 208. Hover-Animationen ohne Verzoegerung: "400ms var(--transition--base)" ergab 400ms + 220ms Delay (Bild-Zoom auf Produkt-, Blog-, Rezept- und Medienkarten) ---------- */
.media-frame_img,
.product-item_image {
  transition: transform 400ms cubic-bezier(0.3, 0.7, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .media-frame_img,
  .product-item_image {
    transition: none;
  }
}

/* ---------- 209. Rezepte-Übersicht: Karten ohne Kurzbeschreibung ohne Leerraum ---------- */
.section_recipe-index .recipe-index_text:empty {
  display: none;
}
.section_recipe-index .recipe-index_card {
  min-height: 0;
}

/* ---------- 210. News-/Artikel-Karten: Teaser per CSS auf 3 Zeilen kuerzen (statt Liquid-truncate) ---------- */
.article-card_text,
.blog-card_text,
.section_newsroom-index .newsroom-feature_text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 211. Rezeptkarten (Startseiten-Slider + Übersicht): Sterne wie in der Übersicht, leere Texte/Meta ohne Leerraum ---------- */
.recipe-card_rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.347rem;
  margin-bottom: 0.5rem;
}
.recipe-card_rating .recipe-index_stars {
  position: relative;
  display: inline-block;
  width: 4.861rem;
  height: 0.972rem;
  color: #dcdfda;
}
.recipe-card_rating .recipe-index_stars svg {
  display: block;
  width: 4.861rem;
  height: 0.972rem;
}
.recipe-card_rating .recipe-index_stars-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rating, 0%);
  overflow: hidden;
  color: var(--color--stars);
}
.recipe-card_rating .recipe-index_rating-value {
  font-size: 0.764rem;
  line-height: 1.66;
  letter-spacing: -0.01em;
  color: #232e20;
}
.text-rich-text:empty,
.recipe-card_text:empty,
.meta-row:not(:has(*)) {
  display: none;
}
.section_recipe-slider .recipe-card {
  min-height: 0;
  height: 100%;
}
@media (max-width: 767px) {
  .section_recipe-slider .recipe-card {
    min-height: 0;
  }
}

/* ---------- 212. Newsletter mit Brevo-Endpunkt: Formular sichtbar. Die hCaptcha-Regel (form-el > :not(.li-guard) wird unsichtbar)
   gilt nur fuer das Shopify-Kundenformular; im Brevo-Formular sind Feld, Erfolg und Fehler direkte Kinder ---------- */
.section_newsletter-cta .newsletter-cta_form-el[data-nl-brevo] > :not(.newsletter-cta_hp) {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible;
  clip: auto;
}
.section_newsletter-cta .newsletter-cta_form-el[data-nl-brevo] > .newsletter-cta_form {
  width: 100% !important;
}
.section_newsletter-cta .newsletter-cta_form-el[data-nl-brevo] > [hidden] {
  display: none !important;
}

/* ---------- 213. Karriere Intro (Figma 3-3795): Kennzahlen als 3 gleich breite, zentrierte Spalten ---------- */
.section_career-intro .career-intro_stats {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 5rem;
  width: 100%;
}
.section_career-intro .career-intro_stat {
  flex: 0 1 20.375rem;
  align-items: center;
  min-width: 0;
  text-align: center;
}
.section_career-intro .career-intro_stat-label {
  max-width: 17.9rem;
}
@media (max-width: 991px) {
  .section_career-intro .career-intro_stats {
    gap: 2.5rem;
  }
}
@media (max-width: 767px) {
  .section_career-intro .career-intro_stats {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .section_career-intro .career-intro_stat {
    flex-basis: auto;
    width: 100%;
  }
}

/* ---------- 214. Produkt Anwendungen (Figma 457-39696 MeineBase, 458-39653 MiraVera, 482-33333 3x3, 557-42399 LeibWickel):
   Bild links bis zum Rand, rechts Übertitel, Überschrift und Liste der Anwendungen ---------- */
.section_product-uses .product-uses_inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background-color: #f7f7f7;
  background-image: linear-gradient(178deg, #f7f7f7 2%, #ffffff 61%, #f7f7f7 116%);
}
.product-uses_media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background-color: var(--color--grey);
}
.product-uses_media .li-guard {
  display: contents;
}
.product-uses_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-uses_content {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  max-width: calc(28.9375rem + 8.75rem);
  padding: 6.625rem 2.5rem 6.625rem 8.75rem;
}
.product-uses_head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.product-uses_head .li-guard {
  display: contents;
}
.product-uses_eyebrow {
  margin: 0;
  color: #656d63;
  font-size: var(--font-size--h6, 1.0625rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
.product-uses_heading {
  margin: 0;
  color: var(--color--dark, #232e20);
  font-size: var(--font-size--h2, 2.25rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.product-uses_list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-uses_item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.product-uses_title {
  margin: 0;
  color: var(--color--dark, #232e20);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.product-uses_text {
  margin: 0;
  color: #656d63;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
@media (max-width: 991px) {
  .product-uses_content {
    padding: 4.5rem 2.5rem 4.5rem 3.5rem;
  }
}
@media (max-width: 767px) {
  .section_product-uses .product-uses_inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-uses_media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .product-uses_content {
    gap: 2.5rem;
    max-width: none;
    padding: 3rem 1.25rem;
  }
  .product-uses_list {
    gap: 1.75rem;
  }
  .product-uses_title {
    font-size: 1.125rem;
  }
}

/* ---------- 215. Karriere Werte: Kartenüberschriften auf gleicher Höhe (Textblock mit fester Mindesthöhe, unten verankert)
   und stärkerer dunkler Verlauf von unten bis etwa zur Mitte für bessere Lesbarkeit ---------- */
.section_career-values .career-values_card {
  padding: 0 2.5rem 2.75rem;
}
.section_career-values .career-values_body {
  justify-content: flex-start;
  width: 100%;
  min-height: 13.5rem;
}
.section_career-values .career-values_shade {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.12) 18%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.42) 62%, rgba(0, 0, 0, 0.7) 82%, rgba(0, 0, 0, 0.78) 100%);
}
@media (max-width: 767px) {
  .section_career-values .career-values_card {
    padding: 0 1.25rem 2rem;
  }
  .section_career-values .career-values_body {
    min-height: 15rem;
    gap: 1rem;
  }
}

/* ---------- 216. Karriere Werte: Überschriften bleiben auf gleicher Höhe, die Texte enden unten bündig ---------- */
.section_career-values .career-values_card-text {
  margin-top: auto;
}

/* ---------- 217. Karriere Werte: Glas-Kasten hinter der Handschrift wirklich mit rgba(255,255,255,.2) + blur(7px).
   opacity 0.8 am Schriftzug hat den backdrop-filter des ::before ausgeschaltet und das Weiss abgeschwaecht;
   die 80 % stecken jetzt nur in der Schriftfarbe ---------- */
.section_career-values .career-values_script {
  opacity: 1;
  color: rgba(255, 255, 255, 0.8);
}
.section_career-values .career-values_script::before {
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

/* ---------- 218. Karriere Werte wie Figma 3-3837: Textspalte 312px (Padding 52px), unten 50px, fester Abstand 20px
   zwischen Überschrift und Text. Mindesthöhe = längster Text (7 Zeilen), so stehen die Überschriften auf gleicher Höhe.
   Ersetzt das "Text unten bündig" aus 216 ---------- */
.section_career-values .career-values_card {
  padding: 0 3.25rem 3.125rem;
}
.section_career-values .career-values_body {
  gap: 1.25rem;
  min-height: 12.0625rem;
}
.section_career-values .career-values_card-text {
  margin-top: 0;
}
@media (max-width: 767px) {
  .section_career-values .career-values_card {
    padding: 0 1.5rem 2rem;
  }
  .section_career-values .career-values_body {
    gap: 1rem;
    min-height: 15rem;
  }
}

/* ---------- 219. Karriere Werte: weniger Innenabstand (40px statt 52px), Texte breiter und gleichmaessiger (6/5/5 Zeilen),
   Mindesthoehe an den laengsten Text angepasst, Ueberschriften bleiben auf gleicher Hoehe ---------- */
.section_career-values .career-values_card {
  padding: 0 2.5rem 3.125rem;
}
.section_career-values .career-values_body {
  min-height: 10.8rem;
}

/* ---------- 220. Karriere Werte: Textblock unten verankert, kein Leerraum unter dem Text; fester Abstand 20px unter der Ueberschrift.
   (Ueberschriften liegen dadurch max. eine Textzeile auseinander) ---------- */
.section_career-values .career-values_body {
  min-height: 0;
}
@media (max-width: 767px) {
  .section_career-values .career-values_body {
    min-height: 0;
  }
}

/* ---------- 221. Collection Products (Figma 1-9653): Produktanzahl hinter der Ueberschrift, z. B. "Alle Produkte (35)" ---------- */
.collection-products_count {
  margin-left: 0.25em;
  font-variant-numeric: tabular-nums;
}

/* ---------- 222. Werte-Karten wie Figma "Values Slider" (Review 11128-32393), Karriere + Über uns:
   Texte immer linksbündig, Glas-Kasten links auf Textkante (Desktop 52px, Mobil 28px), Handschrift 20px eingerückt.
   Mobil: Karten 320 x 428px, Titel 20px, Text 13px, Abstand 12px, unten 40px ---------- */
/* Karriere */
.section_career-values .career-values_card {
  align-items: stretch;
  text-align: left;
}
.section_career-values .career-values_body {
  align-items: flex-start;
  text-align: left;
}
.section_career-values .career-values_script {
  left: 3.75rem;
  transform: none;
}
.section_career-values .career-values_script::before {
  left: -1.25rem;
  transform: none;
}
/* Über uns */
.about-values_head.section-head.is-center,
.about-values_head.section-head.is-center .section-head_content {
  align-items: flex-start;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.about-values_head .u-text-width > * {
  margin-left: 0;
  margin-right: 0;
}
.about-values_head .section-head_content {
  gap: 0.75rem;
}
.about-values_label-bg {
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.about-values_script {
  margin-left: 1.25rem;
  opacity: 1;
  color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 767px) {
  /* Karriere mobil */
  .section_career-values .career-values_slide {
    width: 20rem;
  }
  .section_career-values .career-values_card {
    height: 26.75rem;
    padding: 0 1.75rem 2.5rem;
  }
  .section_career-values .career-values_body {
    gap: 0.75rem;
    min-height: 0;
  }
  .section_career-values .career-values_card-title {
    font-size: 1.25rem;
    letter-spacing: 0.01em;
  }
  .section_career-values .career-values_card-text {
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
  }
  .section_career-values .career-values_script {
    left: 3rem;
    padding-top: 2.25rem;
    font-size: 1.625rem;
  }
  .section_career-values .career-values_script::before {
    width: 7rem;
    height: 5.8125rem;
  }
  /* Über uns mobil: horizontaler Wisch-Slider wie Karriere, rechts bis zum Rand */
  .about-values_grid {
    display: flex;
    gap: 1rem;
    max-width: none;
    margin-top: 2rem;
    margin-right: calc(-1 * var(--space--80));
    padding-right: var(--space--80);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .about-values_grid::-webkit-scrollbar {
    display: none;
  }
  .about-values_grid > * {
    flex: 0 0 min(20rem, 85vw);
    max-width: none;
    scroll-snap-align: start;
  }
  .about-values_card {
    min-height: 26.75rem;
  }
  .about-values_label,
  .about-values_body {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
  .about-values_label {
    height: 5.8125rem;
  }
  .about-values_label-bg {
    left: 1.75rem;
    width: 7rem;
    height: 5.8125rem;
  }
  .about-values_script {
    font-size: 1.625rem;
  }
  .about-values_body {
    gap: 0.75rem;
    padding-bottom: 2.5rem;
  }
  .about-values_title {
    font-size: 1.25rem;
  }
  .about-values_card-text {
    font-size: 0.8125rem;
  }
}

/* ---------- 223. Produktanzahl: der Converter setzt schon ein Leerzeichen zwischen Titel und Anzahl, kein zusaetzlicher Abstand ---------- */
.collection-products_count {
  margin-left: 0;
}

/* ---------- 224. Rubrik Vorteile (z. B. Basische Beauty) wie die Werte-Karten auf Karriere/Über uns:
   linksbündig, Innenabstand 40px, Glas-Kasten links mit Blur, dunkler Verlauf unten, mobil wischbar 320 x 428px ---------- */
.section_guide-benefits .guide-benefits_card {
  align-items: stretch;
  padding: 0 2.5rem 3.125rem;
  text-align: left;
}
.section_guide-benefits .guide-benefits_overlay {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.12) 18%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.42) 62%, rgba(0, 0, 0, 0.7) 82%, rgba(0, 0, 0, 0.78) 100%);
}
.section_guide-benefits .guide-benefits_label {
  left: 3.75rem;
  transform: none;
}
.section_guide-benefits .guide-benefits_label-bg {
  left: -1.25rem;
  width: 7.5rem;
  height: 6.25rem;
  transform: none;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.section_guide-benefits .guide-benefits_script {
  opacity: 1;
  color: rgba(255, 255, 255, 0.8);
}
.section_guide-benefits .guide-benefits_body {
  align-items: flex-start;
  gap: 1.25rem;
  max-width: none;
  width: 100%;
}
.section_guide-benefits .guide-benefits_text {
  max-width: none;
  font-size: 0.875rem;
}
@media (max-width: 767px) {
  .section_guide-benefits .guide-benefits_grid,
  .section_guide-benefits .guide-benefits_wrap[class*="is-count-"] .guide-benefits_grid {
    display: flex;
    gap: 1rem;
    margin-right: calc(-1 * var(--space--80));
    padding-right: var(--space--80);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .section_guide-benefits .guide-benefits_grid::-webkit-scrollbar {
    display: none;
  }
  .section_guide-benefits .guide-benefits_grid > * {
    flex: 0 0 min(20rem, 85vw);
    scroll-snap-align: start;
  }
  .section_guide-benefits .guide-benefits_card {
    min-height: 26.75rem;
    padding: 0 1.75rem 2.5rem;
  }
  .section_guide-benefits .guide-benefits_label {
    left: 3rem;
    padding-top: 2.25rem;
  }
  .section_guide-benefits .guide-benefits_label-bg {
    width: 7rem;
    height: 5.8125rem;
  }
  .section_guide-benefits .guide-benefits_script {
    font-size: 1.625rem;
  }
  .section_guide-benefits .guide-benefits_body {
    gap: 0.75rem;
  }
  .section_guide-benefits .guide-benefits_title {
    font-size: 1.25rem;
  }
  .section_guide-benefits .guide-benefits_text {
    font-size: 0.8125rem;
  }
}

/* ---------- 225. Punkte-Navigation fuer die wischbaren Karten-Reihen (Rubrik Vorteile, Über uns Werte), nur mobil ---------- */
.lf-scroll-dots {
  display: none;
  justify-content: center;
  margin-top: 1.5rem;
  color: var(--color--dark);
}
.lf-scroll-dots .swiper-pagination-bullet {
  padding: 0;
  border: 0;
  cursor: pointer;
}
.lf-scroll-dots .swiper-pagination-bullet:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.1875rem;
}
@media (max-width: 767px) {
  .lf-scroll-dots {
    display: flex;
  }
}

/* ---------- 226. Historie (Figma 5-5400): Swiper setzt .swiper-slide auf display:block und hat das 2-Spalten-Raster
   (Bild 650 / Text 439, Abstand 121) aufgehoben. Spuren-Breite inkl. Schatten-Puffer, Text vertikal mittig,
   Pfeile 103px unter dem Text; Hoehe passt sich dem aktiven Meilenstein an (autoHeight) ---------- */
.milestones-slider_list .milestones-slider_slide {
  display: grid;
  align-items: center;
}
.section_milestones .milestones-slider_track {
  width: calc(100% + 5rem);
}
.section_milestones .milestones-slider_list {
  align-items: flex-start;
}
.section_milestones .milestones-slider_body {
  padding-bottom: 8.9375rem;
}
.section_milestones .milestones-slider_nav {
  bottom: 5.9375rem; /* 15px ueber der Bildkante + 80px Schatten-Puffer der Spur */
}
@media (max-width: 991px) {
  .milestones-slider_list .milestones-slider_slide {
    align-items: stretch;
  }
  .section_milestones .milestones-slider_body {
    padding-bottom: 4.5rem;
  }
  .section_milestones .milestones-slider_nav {
    bottom: 0;
  }
}
@media (max-width: 767px) {
  .section_milestones .milestones-slider_track {
    width: calc(100% + 2rem);
  }
}

/* ---------- 227. Historie: Zeitleiste ohne abgeschnittene Jahre (overflow visible), blaettert per transform eine Gruppe weiter,
   sobald das letzte sichtbare Jahr aktiv wird; normaler Abstand zwischen Tag und Ueberschrift ---------- */
.section_milestones .milestones-slider_years {
  overflow: visible;
  transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.3, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .section_milestones .milestones-slider_years {
    transition: none;
  }
}
.section_milestones .milestones-slider_body {
  gap: 1.5rem;
}

/* ---------- 228. Hero-Pills (Rubrik/Basenwelt, Karriere, Über uns): mobil umbrechen statt seitlich scrollen ---------- */
.section_guide-hero .guide-hero_chips,
.section_career-hero .career-hero_list {
  flex-wrap: wrap;
  overflow: visible;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.section_guide-hero .guide-hero_chips > *,
.section_career-hero .career-hero_list > * {
  flex-shrink: 0;
}

/* ---------- 229. Historie: Bild schmaler und niedriger (max. 460px, auf flachen Bildschirmen 50vh), damit die Zeitleiste
   mit den Jahren noch im ersten Blick sichtbar ist ---------- */
.milestones-slider_list .milestones-slider_slide {
  grid-template-columns: minmax(0, 560fr) minmax(0, 439fr);
}
.section_milestones .milestones-slider_media {
  height: clamp(20rem, 50vh, 28.75rem);
  padding: 3.5rem 4.5rem;
}
@media (max-width: 991px) {
  .milestones-slider_list .milestones-slider_slide {
    grid-template-columns: minmax(0, 1fr);
  }
  .section_milestones .milestones-slider_media {
    height: 26rem;
    padding: var(--space--40);
  }
}
@media (max-width: 767px) {
  .section_milestones .milestones-slider_media {
    height: 18rem;
    padding: var(--space--24);
  }
}
.section_milestones .milestones-slider_nav {
  left: calc((100% - 7.5625rem) * 0.5606 + 7.5625rem);
}
@media (max-width: 991px) {
  .section_milestones .milestones-slider_nav {
    left: 0;
  }
}

/* ---------- 230. Historie "Weiterlesen"-Panel wie die Produkt-Sidecards: 12px Abstand zum Rand, weicher Hintergrund mit Blur,
   Ein- und Ausfahren von rechts, mobil vollflaechig. Ohne Vor/Zurueck-Buttons ---------- */
.milestones-drawer,
.milestones-drawer[open] {
  inset: 0.75rem 0.75rem 0.75rem auto;
  width: min(32.375rem, calc(100% - 1.5rem));
  height: auto;
  max-height: none;
  animation: none;
  transform: translateX(calc(100% + 1rem));
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1), visibility 0s linear 0.35s;
}
.milestones-drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1), visibility 0s;
}
.milestones-drawer::backdrop {
  background-color: rgba(35, 46, 32, 0.4);
  -webkit-backdrop-filter: blur(0.15625rem);
  backdrop-filter: blur(0.15625rem);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.milestones-drawer.is-open::backdrop {
  opacity: 1;
}
.milestones-drawer_panel {
  min-height: 100%;
  padding: 3.75rem 3.75rem 2.5rem;
}
.milestones-drawer_close {
  width: auto;
  height: auto;
  padding: 0.375rem;
}
@media (prefers-reduced-motion: reduce) {
  .milestones-drawer,
  .milestones-drawer.is-open,
  .milestones-drawer::backdrop {
    transition: none;
  }
}
@media (max-width: 767px) {
  .milestones-drawer,
  .milestones-drawer[open] {
    inset: 0;
    width: 100%;
  }
  .milestones-drawer_panel {
    padding: 3.5rem var(--space--20) var(--space--24);
  }
}

/* ---------- 231. Logo-Kasten in den Proportionen des neuen Logos (312 x 230). Hoehe bleibt wie bisher (Desktop 127px,
   mobil 88px), damit das Logo wie ein Label unter der Nav heraushaengt; Breite ergibt sich aus dem Logo (173 / 120px).
   Kein roter Ueberstand mehr, die rote Flaeche kommt aus dem Logo selbst ---------- */
.nav_logo-link,
.nav_topbar[hidden] + .nav_main .nav_logo-link {
  width: auto;
  height: 7.9375rem;
  aspect-ratio: 312 / 230;
  background-color: transparent;
}
.search-modal_logo {
  height: auto;
  aspect-ratio: 312 / 230;
  background-color: transparent;
}
.nav_logo-img,
.search-modal_logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 991px) {
  .nav_logo-link,
  .nav_topbar[hidden] + .nav_main .nav_logo-link {
    height: 5.25rem;
  }
}

/* ---------- 232. Mobil: Nav-Icons optisch gleich gross (sichtbare Glyphe je ca. 17-18px).
   Die SVGs haben unterschiedlich viel Innenraum; Suche und Konto werden verkleinert, Warenkorb bleibt, Burger etwas feiner ---------- */
@media (max-width: 991px) {
  .nav_main .nav_shop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
  }
  .nav_main .nav_shop-icon.search-modal_open .icon-svg {
    width: 1.375rem;
    height: 1.375rem;
  }
  .nav_main a.nav_shop-icon:not(.cart-drawer_open) .icon-svg {
    width: 1.125rem;
    height: 1.125rem;
  }
  .nav_main .menu-icon {
    width: 1.25rem;
    height: 0.9375rem;
  }
  .nav_main .menu-icon [class*="menu-icon_line"] {
    height: 0.09375rem;
  }
}

/* ---------- 233. Desktop: Nav-Icons optisch angleichen (sichtbare Glyphe je ca. 15px wie der Warenkorb).
   Suche 19px, Konto 16px, Warenkorb bleibt 20px. Die Klickflaeche (.nav_shop-icon) bleibt unveraendert; die Mobil-Werte aus 232 werden danach erneut gesetzt ---------- */
.nav_main .nav_shop-icon.search-modal_open .icon-svg {
  width: 1.1875rem;
  height: 1.1875rem;
}
.nav_main a.nav_shop-icon:not(.cart-drawer_open) .icon-svg {
  width: 1rem;
  height: 1rem;
}
@media (max-width: 991px) {
  .nav_main .nav_shop-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
  .nav_main .nav_shop-icon.search-modal_open .icon-svg {
    width: 1.375rem;
    height: 1.375rem;
  }
  .nav_main a.nav_shop-icon:not(.cart-drawer_open) .icon-svg {
    width: 1.125rem;
    height: 1.125rem;
  }
}

/* ---------- 234. Händlersuche groesser: Iframe breiter als der Inhaltscontainer (bis 1760px, sonst volle Breite minus Rand)
   und so hoch wie der Bildschirm abzueglich Navigation (mind. 45rem); weniger Abstand zur Ueberschrift ---------- */
.section_dealer-locator .dealer-locator_container {
  gap: 3rem;
}
.section_dealer-locator .dealer-locator_frame {
  flex: none;
  width: min(calc(100vw - 2 * var(--space--80)), 110rem);
  height: max(var(--dealer-locator-h, 45rem), calc(100svh - 8rem));
}
@media (max-width: 991px) {
  .section_dealer-locator .dealer-locator_container {
    gap: 2.5rem;
  }
}
@media (max-width: 767px) {
  .section_dealer-locator .dealer-locator_container {
    gap: 2rem;
  }
  .section_dealer-locator .dealer-locator_frame {
    width: 100%;
    height: max(var(--dealer-locator-h-m, 40rem), calc(100svh - 6rem));
  }
}

/* ---------- 235. Händler-Overlay (Produktseite + Produktkarten): vollflaechig mit 12px Rand wie die Sidecards,
   abgedunkelter Hintergrund mit Blur, Ein-/Ausblenden; Iframe wird erst beim Oeffnen geladen ---------- */
html.is-dealer-open {
  overflow: hidden;
}
.dealer-overlay {
  position: fixed;
  inset: 0.75rem;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.625rem;
  overflow: hidden;
  background-color: var(--color--white);
  opacity: 0;
  transform: translateY(1.5rem) scale(0.985);
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1), visibility 0s linear 0.35s;
}
.dealer-overlay.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1), visibility 0s;
}
.dealer-overlay::backdrop {
  background-color: rgba(35, 46, 32, 0.4);
  -webkit-backdrop-filter: blur(0.15625rem);
  backdrop-filter: blur(0.15625rem);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dealer-overlay.is-open::backdrop {
  opacity: 1;
}
.dealer-overlay_panel {
  position: relative;
  width: 100%;
  height: 100%;
}
.dealer-overlay_frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.dealer-overlay_close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color--white);
  box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.15);
  color: var(--color--dark);
  cursor: pointer;
}
.dealer-overlay_close-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.dealer-overlay_close:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
@media (hover: hover) {
  .dealer-overlay_close:hover {
    background-color: #f6f4f3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dealer-overlay,
  .dealer-overlay.is-open,
  .dealer-overlay::backdrop {
    transition: none;
  }
}
@media (max-width: 767px) {
  .dealer-overlay {
    inset: 0.5rem;
  }
}

/* ---------- 236. Händler-Overlay: nur Opacity-Animation (kein transform, die Karte mit vielen Markern ruckelt sonst);
   ab Tablet (<= 991px) vollflaechig ohne Rand und ohne Rundung ---------- */
.dealer-overlay,
.dealer-overlay.is-open {
  transform: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.dealer-overlay.is-open {
  transition: opacity 0.3s ease, visibility 0s;
}
@media (max-width: 991px) {
  .dealer-overlay {
    inset: 0;
    border-radius: 0;
  }
}

/* ---------- 237. Händlersuche-Seite ab Mobil quer (<= 767px): Iframe randlos ueber die volle Bildschirmbreite, ohne Rundung ---------- */
@media (max-width: 767px) {
  .section_dealer-locator .dealer-locator_frame {
    width: 100vw;
    max-width: none;
    border-radius: 0;
  }
}

/* ---------- 238. PDP Story-Karten (Figma 11126-19540): Text linksbuendig, Glas-Kasten links an der Textkante.
   Reihe hat 3:2 als MINDEST-Hoehe (Container-Einheit statt aspect-ratio) und waechst mit laengerem Text,
   das Bild daneben waechst mit. Handschrift rutscht nicht mehr aus dem Kasten (Label schrumpft nicht) ---------- */
.product-header_story-track {
  container-type: inline-size;
}
.product-header_story-row {
  height: auto;
  aspect-ratio: auto;
  min-height: calc(100cqw * 2 / 3);
}
.product-header_story-row:has(.product-header_story-media.is-wide) {
  min-height: 0;
}
.product-header_story-row > .product-header_story-media {
  height: auto;
  min-height: 100%;
}
.product-header_story-panel {
  align-items: stretch;
  justify-content: space-between;
  gap: 2.5rem;
  text-align: left;
}
.product-header_story-label {
  flex-shrink: 0;
  justify-content: flex-start;
  width: auto;
}
.product-header_story-label-bg {
  left: 0;
  transform: none;
}
.product-header_story-script {
  margin-left: 1.25rem;
}
.product-header_story-body {
  align-items: flex-start;
  width: 100%;
  max-width: none;
  text-align: left;
}
.product-header_story-panel .u-text-width > * {
  margin-left: 0;
  margin-right: 0;
}
@media (max-width: 767px) {
  .product-header_story-row {
    min-height: 0;
  }
  .product-header_story-track .product-header_story-panel {
    justify-content: space-between;
    gap: 2rem;
  }
}

/* ---------- 239. PDP Story-Karten: Handschrift skaliert mit der Kartenbreite (max. 32px), damit sie in schmalen Fenstern nicht abgeschnitten wird ---------- */
.product-header_story-script {
  font-size: clamp(1.375rem, 2.6cqw, 2rem);
}

/* ---------- 240. PDP Story-Karten nach Figma (Desktop 11126-19540, mobil 11298-24148): Handschrift fest 32px
   (239 hat sie auf ~22px verkleinert) und bricht nur bei zu schmaler Karte um. Mobil: Karten 288 x mind. 360,
   Text im normalen Fluss, Karte und Bild daneben wachsen mit. Ueberschrift "Unsere Vorteile" linksbuendig ---------- */
.product-header_story-label {
  height: auto;
  min-height: 6.25rem;
}
.product-header_story-script {
  font-size: 2rem;
  white-space: normal;
}
/* Titel linksbuendig: die globale Zentrier-Regel :is(... .product-header_story-body ...) .u-text-width > *
   ist spezifischer als die Ueberschreibung aus 238 */
.product-header_story-panel .product-header_story-body .u-text-width > * {
  margin-left: 0;
  margin-right: 0;
}
@media (max-width: 767px) {
  .product-header_story-heading {
    align-self: stretch;
    width: 100%;
    text-align: left;
  }
  .product-header_story-track {
    align-items: stretch;
  }
  .product-header_story-track .product-header_story-panel,
  .product-header_story-track .product-header_story-media,
  .product-header_story-track .product-header_story-media.is-wide {
    height: auto;
    min-height: 22.5rem;
    aspect-ratio: auto;
  }
  .product-header_story-track .product-header_story-panel {
    padding: 0 2rem 3.75rem;
  }
}

/* ---------- 241. PDP Story-Karten zwischen Desktop und Tablet: linke Spalte wird schmal (Karte bei 1200px nur 253px statt 325px).
   Bis 1440: etwas weniger Padding (32/48 statt 40/60), Handschrift 28px. Bis 1280: Text und Bild untereinander (Bild 3:2).
   Ab Tablet (991) wieder nebeneinander wie vorher, mobil unveraendert ---------- */
@media (max-width: 1439px) {
  .product-header_story-panel {
    padding: 0 2rem 3rem;
  }
  .product-header_story-script {
    font-size: 1.75rem;
  }
}
@media (max-width: 1279px) {
  .product-header_story-row {
    flex-direction: column;
    min-height: 0;
  }
  .product-header_story-row > * {
    flex: none;
  }
  .product-header_story-row > .product-header_story-media {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
  .product-header_story-panel {
    gap: 2.5rem;
    padding: 0 2.5rem 2.5rem;
  }
  .product-header_story-script {
    font-size: 2rem;
  }
}
@media (max-width: 991px) {
  .product-header_story-row {
    flex-direction: row;
    min-height: calc(100cqw * 2 / 3);
  }
  .product-header_story-row > * {
    flex: 1 1 50%;
  }
  .product-header_story-row > .product-header_story-media {
    min-height: 100%;
    aspect-ratio: auto;
  }
  .product-header_story-panel {
    padding: 0 2.5rem 3.75rem;
  }
}
@media (max-width: 767px) {
  .product-header_story-row {
    min-height: 0;
  }
  .product-header_story-track .product-header_story-media {
    min-height: 22.5rem;
  }
}

/* ---------- 242. PDP-Galerie mobil nach Figma 11298-23999: Kachel im Desktop-Seitenverhaeltnis 657:641 statt quadratisch,
   Badge 12px, Siegel 51x43 enger in der Ecke, Breadcrumb 14px einzeilig mit "..." statt "Alle Produkte" ---------- */
@media (max-width: 767px) {
  .product-header_gallery {
    aspect-ratio: 657 / 641;
  }
  .product-header_badges {
    top: 0.6875rem;
  }
  .product-header_badges .badge {
    font-size: var(--font-size--link-3, 0.75rem);
    letter-spacing: 0.03em;
  }
  .product-header_certs {
    top: 0.5rem;
    right: 0.5625rem;
    gap: 0.3125rem;
  }
  .product-header_cert-img {
    width: 3.1875rem;
    height: 2.6875rem;
  }
  .product-header_breadcrumb {
    font-size: 0.875rem;
    letter-spacing: 0.04em;
  }
  .product-header_breadcrumb .product-header_crumb {
    font-size: inherit;
    letter-spacing: inherit;
  }
  .product-header_breadcrumb > .product-header_crumb:first-child > span {
    display: none;
  }
  .product-header_breadcrumb > .product-header_crumb:first-child::before {
    content: "...";
  }
}

/* ---------- 243. Sprach-Dropdown im Header ueber dem Logo (beide hatten z-index 30, das Logo kam im DOM spaeter und lag oben) ---------- */
.nav_component .li-lang_dd-list {
  z-index: 40;
}

/* ---------- 244. PDP-Galerie mobil wie Figma 11298-23999: Kachel 335:382 (etwas hoeher als Desktop),
   Produktbild endet oberhalb der Thumbs (17px Abstand + 50px Thumbs + Luft), damit die Thumbs nicht ueber dem Produkt liegen ---------- */
@media (max-width: 767px) {
  .product-header_gallery {
    aspect-ratio: 335 / 382;
  }
  .product-header_gallery .product-header_main-swiper {
    bottom: 5rem;
  }
}

/* ---------- 245. Social Media mit Elfsight-Instagram-Feed: rote Kachel links fest (Breite ~1 Kachel),
   Elfsight-Widget daneben; mobil Kachel oben, Feed darunter ---------- */
.social-media_layout.is-elfsight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr);
  gap: 0.125rem;
  align-items: stretch;
}
.social-media_layout.is-elfsight > .social-media_promo {
  display: flex;
}
.social-media_elfsight {
  min-width: 0;
  min-height: 20rem;
}
@media (max-width: 767px) {
  .social-media_layout.is-elfsight {
    display: block;
  }
  .social-media_layout.is-elfsight .social-media_elfsight {
    margin-top: 0.125rem;
  }
}

/* ---------- 246. Social Media mit Elfsight: keine rote Kachel, Feed ueber die volle Breite (ersetzt Grid aus 245) ---------- */
.social-media_layout.is-elfsight {
  display: block;
}
.social-media_layout.is-elfsight > .social-media_promo {
  display: none;
}
@media (max-width: 767px) {
  .social-media_layout.is-elfsight .social-media_elfsight {
    margin-top: 0;
  }
}

/* ---------- 247. Social Media mit Elfsight: Button "Folge uns auf Instagram" unter dem Feed ---------- */
.social-media_elfsight-cta {
  margin-top: var(--space--32);
}
@media (max-width: 767px) {
  .social-media_elfsight-cta {
    margin-top: var(--space--24);
    padding-left: var(--space--20);
    padding-right: var(--space--20);
  }
  .social-media_elfsight-cta .button {
    width: 100%;
  }
}

/* ---------- 248. Social Media mit Elfsight-Slider wie Figma 10761-5851 / 11043-22116:
   Desktop rote Kachel links (335 von 1440), Elfsight-Slider daneben; mobil Kachel oben, Slider darunter.
   Hebt das Ausblenden aus 246 wieder auf ---------- */
.social-media_layout.is-elfsight {
  display: grid;
  grid-template-columns: minmax(0, 335fr) minmax(0, 1105fr);
  gap: 0.125rem;
  align-items: stretch;
}
.social-media_layout.is-elfsight > .social-media_promo {
  display: flex;
}
@media (max-width: 767px) {
  .social-media_layout.is-elfsight {
    display: block;
  }
  .social-media_layout.is-elfsight .social-media_elfsight {
    margin-top: 0.125rem;
  }
}

/* ---------- 249. Social Media mit Elfsight: feste Hoehe wie Figma (1440 x 554, Kachel 344), Slider fuellt
   die volle Hoehe neben der roten Kachel; mobil Slider-Bereich 375 x 473 unter der Kachel ---------- */
.social-media_layout.is-elfsight {
  grid-template-columns: minmax(0, 344fr) minmax(0, 1094fr);
  aspect-ratio: 1440 / 554;
}
.social-media_elfsight {
  min-height: 0;
  height: 100%;
}
.social-media_elfsight > [class^="elfsight-app-"] {
  height: 100%;
}
@media (max-width: 767px) {
  .social-media_layout.is-elfsight {
    aspect-ratio: auto;
  }
  .social-media_layout.is-elfsight .social-media_elfsight {
    height: auto;
    aspect-ratio: 375 / 473;
  }
}

/* ---------- 250. Social Media mit Elfsight responsiv (Spaltenwechsel passend zu den Elfsight-Breiten 1024/778/480):
   ab 992px nebeneinander, rote Kachel mind. 17rem breit; darunter Kachel oben (volle Breite), Slider darunter
   mit Hoehe passend zur Spaltenzahl (3 Spalten 2:1, 2 Spalten 4:3, 1 Spalte 375:473) ---------- */
.social-media_layout.is-elfsight {
  grid-template-columns: minmax(17rem, 344fr) minmax(0, 1094fr);
}
@media (max-width: 991px) {
  .social-media_layout.is-elfsight {
    display: block;
    aspect-ratio: auto;
  }
  .social-media_layout.is-elfsight > .social-media_promo {
    display: flex;
    padding: 7rem var(--space--24) var(--space--40);
  }
  .social-media_layout.is-elfsight .social-media_elfsight {
    height: auto;
    aspect-ratio: 2 / 1;
    margin-top: 0.125rem;
  }
}
@media (max-width: 778px) {
  .social-media_layout.is-elfsight .social-media_elfsight {
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 480px) {
  .social-media_layout.is-elfsight .social-media_elfsight {
    aspect-ratio: 375 / 473;
  }
}

/* ---------- 251. Produkt-FAQ Fliesstext wie Figma (CONTENT 5:9598): Antwort 16px / 1.7, max. 608px;
   Text in der roten Kachel 14px / 1.5, Laufweite 0.56px ---------- */
.section_product-faq .accordion_content {
  max-width: 38rem;
  font-size: var(--font-size--body, 1rem);
  line-height: 1.7;
}
.section_product-faq .faq_promo-text {
  font-size: var(--font-size--body-2, 0.875rem);
  line-height: 1.5;
  letter-spacing: 0.035rem;
}

/* ---------- 252. Produkt Warum: Fokuspunkt aus Shopify wirkt (Bild > Fokuspunkt festlegen).
   Bild fuellt genau die Section (statt 62.5rem hoch und oben verankert), Ausschnitt per --focal;
   ohne Fokuspunkt wie bisher oben (Desktop) bzw. Mitte (mobil) ---------- */
.section_product-why .product-why_bg .full-bleed-bg {
  top: 0;
  bottom: 0;
  height: 100%;
  object-position: var(--focal, center top);
}
@media (max-width: 767px) {
  .section_product-why .product-why_bg .full-bleed-bg {
    object-position: var(--focal, center);
  }
}

/* ---------- 253. Broschuere-Banner farbig (Produktseite) wie Figma CONTENT 5:9460: Bildflaeche 551 x 315,
   Bild ohne Zuschnitt (contain) und ohne eigenen Schatten, leicht nach rechts unten versetzt ---------- */
.section_brochure .brochure_panel.is-color .brochure_cover {
  position: relative;
  left: 0.78125rem;
  top: 0.625rem;
  width: 34.4375rem;
  max-width: calc(100% - 3rem);
  height: auto;
  aspect-ratio: 551 / 315;
  box-shadow: none;
}
.section_brochure .brochure_panel.is-color .brochure_cover-img {
  object-fit: contain;
}
@media (max-width: 767px) {
  .section_brochure .brochure_panel.is-color .brochure_cover {
    left: 0;
    top: 0;
    width: 100%;
    max-width: calc(100% - 2rem);
  }
  .section_brochure .brochure_panel.is-color .brochure_media {
    height: auto;
    padding: 1.5rem 0;
  }
}

/* ---------- 254. Produkt-FAQ: rote Kachel rechts bleibt beim Scrollen stehen (wie Produkt-Header, unter der Nav) ---------- */
.section_product-faq .faq_promo {
  position: sticky;
  top: calc(max(var(--nav-height, 6rem), 7.9375rem) + 2rem);
}
@media (max-width: 991px) {
  .section_product-faq .faq_promo {
    position: static;
  }
}

/* ---------- 255. Top-Bar ab 991px abwaerts: Ankuendigung und Sprachauswahl beide 12px ---------- */
@media (max-width: 991px) {
  .nav_topbar-announcement,
  .nav_topbar .li-lang_dd-toggle {
    font-size: 0.75rem;
  }
}

/* ---------- 256. Footer Social-Zeile: "Folge uns ..." und Icons als eine Gruppe mittig, 32px Abstand
   (vorher Text ganz links, Icons ganz rechts); Tablet/Mobil unveraendert ---------- */
.footer_social-inner {
  justify-content: center;
  column-gap: 2rem;
}

/* ---------- 257. Mega-Menue Produktkacheln: Produktbild groesser (Bildflaeche 96px, Bild leicht hineingezoomt,
   weil die Produkt-PNGs viel Rand haben). Accessoires zeigen das freigestellte Verpackungsbild (2. Produktbild, im Header) ---------- */
.nav_mega-tile-media {
  width: 6rem;
  height: 6rem;
}
.nav_mega-tile-img {
  transform: scale(1.3);
}

/* ---------- 258. Breadcrumb-Leiste (eigene Section, Stil wie Breadcrumb auf der Produktseite) ---------- */
.section_breadcrumb-bar {
  padding-top: var(--space--24);
  padding-bottom: var(--space--24);
  background-color: var(--color--white);
}
.breadcrumb-bar_nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space--8);
  color: #656d63;
  font-size: var(--font-size--link-2, 0.875rem);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
}
.breadcrumb-bar_nav .li-guard {
  display: contents;
}
@media (hover: hover) {
  .breadcrumb-bar_nav a.product-header_crumb:hover {
    color: var(--color--dark);
  }
}
@media (max-width: 767px) {
  .section_breadcrumb-bar {
    padding-top: var(--space--16);
    padding-bottom: var(--space--16);
  }
}

/* ---------- 259. Über uns Werte: Überschriften aller Karten auf gleicher Höhe (CSS Subgrid),
   Text darunter so lang wie er ist, nicht mehr unten ausgerichtet ---------- */
.about-values_grid {
  grid-template-rows: auto 1fr auto auto;
  row-gap: 0;
  min-height: 35.375rem;
}
.about-values_card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
}
.about-values_label {
  grid-row: 1;
}
.about-values_body {
  display: grid;
  grid-row: 3 / span 2;
  grid-template-rows: subgrid;
  align-content: start;
  row-gap: var(--space--20);
}
@media (max-width: 991px) {
  .about-values_grid {
    grid-template-rows: none;
    row-gap: var(--space--16);
    min-height: 0;
  }
  .about-values_card {
    display: flex;
    grid-row: auto;
  }
  .about-values_body {
    display: flex;
    grid-row: auto;
  }
}
@media (max-width: 767px) {
  .about-values_body {
    row-gap: 0.75rem;
  }
}

/* ---------- 260. Karriere Werte wie Über uns (259): Überschriften aller Karten auf gleicher Höhe (CSS Subgrid
   über die Slider-Leiste), Text darunter so lang wie er ist, nicht mehr unten ausgerichtet. Swiper läuft unverändert ---------- */
.section_career-values .swiper-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr auto auto;
  min-height: 35.375rem;
}
.section_career-values .career-values_slide {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}
.section_career-values .career-values_card {
  display: grid;
  grid-row: 1 / span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  height: auto;
}
.section_career-values .career-values_body {
  display: grid;
  grid-row: 2 / span 2;
  grid-template-rows: subgrid;
  align-content: start;
  row-gap: 1.25rem;
}
@media (max-width: 767px) {
  .section_career-values .swiper-wrapper {
    min-height: 26.75rem;
  }
  .section_career-values .career-values_body {
    row-gap: 0.75rem;
  }
}

/* ---------- 261. Mega-Menue: eigenes Nav-Bild (Produkt-Metafeld custom.nav_image, freigestellt und eng zugeschnitten)
   wird nicht hineingezoomt; ohne Nav-Bild bleibt das Produktbild wie in 257 ---------- */
.nav_mega-tile-img.is-nav-image {
  transform: none;
}

/* ---------- 262. Lexikon Detail, Passende Produkte: Slides verschwinden links bündig an der Sliderkante statt über
   Überschrift und Text zu laufen (wie Social Media / Rezepte), rechts weiter bis zum Bildschirmrand, Schatten bleiben ---------- */
.section_lexicon-detail .lexicon-detail_products-slider {
  clip-path: inset(-3rem -100vw -3rem 0);
}
@media (max-width: 991px) {
  .section_lexicon-detail .lexicon-detail_products-slider {
    clip-path: inset(-3rem -100vw -3rem -100vw);
  }
}

/* ---------- 263. Mega-Menue: Nav-Bilder optisch so gross wie die Produkte in den anderen Tabs (dort ca. 60-80px sichtbar).
   Eng zugeschnittene Bilder werden auf max. 84% Breite / 62% Hoehe der Bildflaeche begrenzt:
   lange Buersten ca. 80px breit, fast quadratische (EnergieBuerste) ca. 63 x 60px ---------- */
.nav_mega-tile-img.is-nav-image {
  width: auto;
  height: auto;
  max-width: 84%;
  max-height: 62%;
}

/* ---------- 264. Kategorie-Kacheln: Titel und Unterzeile brechen in der 4-Spalten-Ansicht (1280-1440px) nicht mehr um.
   Schrift skaliert mit der Kachelbreite (Container Query), maximal wie bisher 32px / 13px; seitliches Padding unter 1440px 16px.
   Ab 1400px und in der 2-Spalten-Ansicht bleibt alles unverändert, mobil ebenso ---------- */
.category-tile {
  container-type: inline-size;
}
.category-tile_title {
  font-size: min(2rem, calc(100cqi / 8));
}
.category-tile .meta-row {
  font-size: min(0.8125rem, calc(100cqi / 19.5));
}
@media (max-width: 1439px) {
  .category-tile {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (max-width: 767px) {
  .category-tile {
    container-type: normal;
    padding: 1.25rem;
  }
  .category-tile_title {
    font-size: 1.375rem;
  }
  .category-tile .meta-row {
    font-size: 0.8125rem;
  }
}

/* ---------- 265. KI-Hinweis (Snippet ki-label): dezentes Label "KI-generiert" unten rechts im sichtbaren Bildbereich,
   bleibt auch bei mobil beschnittenen Bildern sichtbar. Liste der KI-Bilder: Metaobjekt ki_bilder / standard ---------- */
.ki-label {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
  background-color: rgba(35, 35, 35, 0.55);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
@media (max-width: 767px) {
  .ki-label {
    right: 0.5rem;
    bottom: 0.5rem;
    font-size: 0.625rem;
  }
}

/* ---------- 266. KI-Hinweis unten links statt rechts (sitzt auf dem sichtbaren Bildrahmen, wird mobil nicht abgeschnitten) ---------- */
.ki-label {
  right: auto;
  left: 0.75rem;
}
@media (max-width: 767px) {
  .ki-label {
    right: auto;
    left: 0.5rem;
  }
}

/* ---------- 267. Downloads mobil/Tablet (bis 991px): Kategorie-Filter als aufklappbare Liste.
   Button "Filter: <aktuelle Kategorie>" klappt die Kategorien auf, nach der Auswahl schliesst er wieder ---------- */
.section_downloads .downloads_filter-toggle {
  display: none;
}
@media (max-width: 991px) {
  .section_downloads .downloads_filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.5rem;
    border: 0;
    border-radius: var(--radius--medium);
    background-color: var(--color--grey);
    color: var(--color--dark);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.26;
    letter-spacing: 0.04em;
    text-align: left;
    cursor: pointer;
  }
  .section_downloads .downloads_filter-toggle:focus-visible {
    outline: 0.125rem solid var(--color--focus);
    outline-offset: 0.125rem;
  }
  .section_downloads .downloads_filter-toggle-label {
    flex: 1;
    min-width: 0;
  }
  .section_downloads .downloads_filter-toggle-caret {
    display: flex;
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    color: var(--color--red);
    transition: transform var(--transition--fast, 0.2s);
  }
  .section_downloads .downloads_filter-toggle-caret .icon-svg {
    width: 100%;
    height: 100%;
  }
  .section_downloads .downloads_sidebar.is-open .downloads_filter-toggle {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .section_downloads .downloads_sidebar.is-open .downloads_filter-toggle-caret {
    transform: rotate(180deg);
  }
  .section_downloads .downloads_sidebar:not(.is-open) .downloads_filter {
    display: none;
  }
  /* aufgeklappt: senkrechte Liste wie auf dem Desktop statt umbrechender Pills */
  .section_downloads .downloads_filter {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.25rem;
    padding: 0 1rem 1rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .section_downloads .downloads_filter-item {
    display: flex;
  }
  .section_downloads .downloads_filter-button {
    width: 100%;
    padding: 0.75rem 1.5rem;
    white-space: normal;
  }
  .section_downloads .downloads_filter-item.is-expanded .downloads_filter-button {
    padding-left: 2rem;
    background-color: transparent;
  }
  .section_downloads .downloads_filter-sub {
    flex-basis: auto;
    padding: 0;
    background-color: transparent;
  }
  .section_downloads .downloads_filter-sublist {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }
  .section_downloads .downloads_filter-subbutton {
    width: calc(100% - 3.5rem);
    margin: 0 1.5rem 0 2rem;
    padding: 0.5rem 1.5rem;
  }
}

/* ---------- 268. Downloads Unterkategorien wie Figma 10886-17241: ist ein Unterpunkt aktiv (rote Pill),
   bleibt der Titel der aufgeklappten Kategorie dunkel; rot nur, solange die Kategorie selbst gewaehlt ist ---------- */
.section_downloads .downloads_filter-item.is-expanded:has(.downloads_filter-subbutton.is-active) > .downloads_filter-button {
  color: var(--color--dark);
}

/* ---------- 269. Downloads mobil: kein Leerzeichen vor dem Doppelpunkt ("Filter: Logos" - der Converter setzt Zeilenumbrueche
   um den Settings-Text, inline-flex schneidet sie ab) und Abstand zwischen Filter-Button und aufgeklappter Liste ---------- */
.section_downloads .downloads_filter-toggle-name {
  display: inline-flex;
}
@media (max-width: 991px) {
  .section_downloads .downloads_filter {
    padding-top: 0.5rem;
  }
}

/* ---------- 270. Downloads mobil: Chevron springt beim Auf-/Zuklappen nicht mehr. Die aufgeklappte weisse Karte ragt
   8px ueber die Liste hinaus (margin -0.5rem), deshalb rechts 8px mehr Innenabstand ---------- */
@media (max-width: 991px) {
  .section_downloads .downloads_filter-item.is-expanded .downloads_filter-button {
    padding-right: 2rem;
  }
}

/* ---------- 271. PDP "Ideale Ergaenzungen": Kurztext nach 3 Zeilen mit ... abgeschnitten (statt nach 60 Zeichen),
   die ganze Karte ist klickbar (Titel-Link spannt sich ueber die Karte, Bild und Button bleiben eigene Links) ---------- */
.section_product-header .product-header_cross-item {
  position: relative;
}
.section_product-header .product-header_cross-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.section_product-header .product-header_cross-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.section_product-header .product-header_cross-media,
.section_product-header .product-header_cross-add {
  position: relative;
  z-index: 2;
}
.section_product-header .product-header_cross-link:focus-visible {
  outline: none;
}
.section_product-header .product-header_cross-link:focus-visible::after {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: -0.125rem;
  border-radius: 0.625rem;
}
@media (hover: hover) {
  .section_product-header .product-header_cross-item:hover .product-header_cross-name {
    color: var(--color--red);
  }
}

/* ---------- 272. Preise & Kaufen: Die Sichtbarkeit steuert jetzt Liquid (eingeloggt + Kunden-Tag aus den Theme-Einstellungen
   "Preise & Kaufen" + Produkt "Kaufbar" + auf Lager). Hebt die pauschale Preis-Ausblendung vom 3.9. wieder auf ---------- */
.product-item_price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 0.5rem;
  row-gap: 0;
}
.product-item_price-current {
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  color: var(--color--dark);
}
.product-item_price-unit {
  display: inline-flex;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-color--secondary, #656d63);
}
.product-header_price-wrapper {
  display: flex;
}
.product-header_tax-note {
  display: inline-block;
  align-self: flex-start;
}
.product-header_shipping {
  display: flex;
}
.product-header_cross-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
  margin-top: 0.25rem;
}
.section_product-header .product-header_cross-price-current {
  font-size: 1.125rem;
  font-weight: 700;
  font-style: italic;
  color: var(--color--dark);
}
.section_product-header .product-header_cross-price-unit {
  display: inline-flex;
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 400;
  color: var(--text-color--secondary, #656d63);
}
.section_product-header .product-header_cross-body:has(.product-header_cross-price) .product-header_cross-text {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* ---------- 273. PDP Groessenauswahl als Dropdown (Figma 12283-31120): "Groesse: <Wert>", weisses Feld mit Rand,
   aufgeklappte Liste mit Schatten, Zeile rot beim Darueberfahren. Die Radios bleiben (Variantenlogik), nur versteckt ---------- */
.product-header_option.has-dd .product-header_option-name,
.product-header_option.has-dd .product-header_radio-list {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.variant-dd {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.variant-dd_label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #656d63;
}
.variant-dd_current {
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  color: var(--color--dark);
}
.variant-dd_toggle {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  width: 100%;
  padding: 1rem 1.25rem;
  border: 0.0625rem solid rgba(101, 109, 99, 0.3);
  border-radius: 0;
  background-color: var(--color--white);
  color: var(--color--dark);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
}
.variant-dd_toggle:focus-visible {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
.variant-dd_value {
  flex: 1;
  min-width: 0;
}
.variant-dd_caret {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--transition--fast, 0.2s);
}
.variant-dd.is-open .variant-dd_caret {
  transform: rotate(180deg);
}
.variant-dd_list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0.375rem 0;
  list-style: none;
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 3.8125rem 0 rgba(0, 0, 0, 0.06), 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.06);
}
.variant-dd_list[hidden] {
  display: none;
}
.variant-dd_option {
  padding: 0.625rem 1.25rem;
  color: var(--color--dark);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.variant-dd_option:focus {
  outline: none;
  background-color: var(--color--red);
  color: var(--color--white);
}
.variant-dd_option.is-disabled {
  color: rgba(35, 46, 32, 0.4);
}
@media (hover: hover) {
  .variant-dd_option:hover {
    background-color: var(--color--red);
    color: var(--color--white);
  }
}

/* ---------- 274. PDP Kaufbereich wie Figma 12283-31210: Preis 32px, Grundpreis 12px, Steuerhinweis 12px dunkel,
   40px bis zur Groessenauswahl, Lieferzeit 16px dunkel ohne Icon. Dropdown-Liste: 16px Innenabstand, 40px Zeilenraster,
   46px hohe rote Zeile beim Darueberfahren mit weisser Schrift (auch bei ausverkauften Groessen) ---------- */
.section_product-header .product-header_buy {
  gap: 0;
}
.section_product-header .product-header_price-wrapper {
  align-items: center;
  column-gap: 0.75rem;
}
.section_product-header .product-header_price {
  font-size: 2rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--color--dark);
}
.section_product-header .product-header_price-unit {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--color--dark);
}
.section_product-header .product-header_tax-note {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--color--dark);
}
.section_product-header .product-header_form {
  gap: 0.625rem;
  margin-top: 2.5rem;
}
.section_product-header .product-header_shipping {
  justify-content: center;
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color--dark);
}
.section_product-header .product-header_shipping-icon {
  display: none;
}
.variant-dd_list {
  padding: 0.1875rem 0;
}
.variant-dd_option {
  padding: 0.8125rem 1.25rem;
}
.variant-dd_option + .variant-dd_option {
  margin-top: -0.375rem;
}
.variant-dd_option.is-disabled {
  color: rgba(35, 46, 32, 0.45);
}
.variant-dd_option.is-disabled:focus {
  color: var(--color--white);
}
@media (hover: hover) {
  .variant-dd_option.is-disabled:hover {
    color: var(--color--white);
  }
}

/* ---------- 275. PDP Siegel-Reihe wie Figma 11127-21960: Badges 51,5 x 71px, 20px Abstand, in einer Reihe,
   32px unter der Lieferzeit (20px Spaltenabstand + 12px), leicht transparent ---------- */
.section_product-header .product-header_usps {
  margin-top: 0.75rem;
}
.section_product-header .product-header_usp-list {
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1.25rem;
  opacity: 0.9;
}
.section_product-header .product-header_usp {
  flex: 0 1 3.21875rem;
  width: 3.21875rem;
  height: 4.4375rem;
}
.section_product-header .product-header_usp-icon {
  width: 100%;
  height: 100%;
}
@media (max-width: 479px) {
  .section_product-header .product-header_usp-list {
    gap: 0.75rem;
  }
}

/* ---------- 276. Warenkorb (Seite + Mini-Warenkorb): Produkt-Kurztext nach 2 Zeilen mit ... abgeschnitten statt nach Zeichenzahl ---------- */
.cart_product-text,
.cart-drawer_text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.cart-drawer_text:empty {
  display: none;
}

/* ---------- 277. Groessen-Dropdown: die gewaehlte Groesse ist rot, andere Zeilen werden beim Darueberfahren
   bzw. per Tastatur-Fokus nur hellgrau (statt zwei roter Zeilen gleichzeitig) ---------- */
.variant-dd_option:focus,
.variant-dd_option.is-disabled:focus {
  background-color: var(--color--grey, #f6f6f6);
  color: var(--color--dark);
}
.variant-dd_option.is-disabled:focus {
  color: rgba(35, 46, 32, 0.45);
}
.variant-dd_option.is-selected,
.variant-dd_option.is-selected:focus {
  background-color: var(--color--red);
  color: var(--color--white);
}
@media (hover: hover) {
  .variant-dd_option:hover {
    background-color: var(--color--grey, #f6f6f6);
    color: var(--color--dark);
  }
  .variant-dd_option.is-disabled:hover {
    color: rgba(35, 46, 32, 0.45);
  }
  .variant-dd_option.is-selected:hover {
    background-color: var(--color--red);
    color: var(--color--white);
  }
}

/* ---------- 278. Groessen-Dropdown: Hover/Fokus-Grau dunkler (#e5e5e5 statt #f6f6f6), damit es sich vom Weiss abhebt ---------- */
.variant-dd_option:focus,
.variant-dd_option.is-disabled:focus {
  background-color: #e5e5e5;
}
.variant-dd_option.is-selected:focus {
  background-color: var(--color--red);
}
@media (hover: hover) {
  .variant-dd_option:hover {
    background-color: #e5e5e5;
  }
  .variant-dd_option.is-selected:hover {
    background-color: var(--color--red);
  }
}

/* ---------- 279. Section Rabattcode (Figma 11097-21121 / -21868 / -22681 / -23134). Layouts ueber data-layout:
   code = Bild vollflaechig mit Text mittig, produkt = links Text/Countdown/Code, rechts Bild mit Produktkarte,
   raster = rechts graue Flaeche mit Kartenraster + Bundle-Button, liste = rechts Karten untereinander auf eigenem Bild ---------- */
.section_discount-code {
  position: relative;
}
.discount-code_inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 49.625rem;
  background-color: var(--color--grey, #f6f6f6);
}
.discount-code_content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 36.8125rem;
  padding: 6.8125rem 2.5rem 5rem 5rem;
}
.discount-code_head {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.discount-code_eyebrow {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #656d63;
}
.discount-code_title {
  max-width: 26.3125rem;
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--color--dark);
}
.discount-code_text {
  max-width: 26.3125rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #656d63;
}
.discount-code_boxes {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
  width: 100%;
  max-width: 31.8125rem;
}
.discount-code_glass {
  padding: 0.25rem;
  background-color: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.08);
}
.discount-code_timer[hidden] {
  display: none;
}
.discount-code_timer-inner {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  min-height: 5.6875rem;
  padding: 0.75rem 1.5rem 0.75rem 2rem;
  background-color: var(--color--white);
  color: var(--color--dark);
}
.discount-code_timer-label {
  font-size: 1rem;
  line-height: 1.7;
}
.discount-code_units {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.discount-code_unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  min-width: 1.5625rem;
}
.discount-code_num {
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.discount-code_unit-label {
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.discount-code_sep {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}
.discount-code_code-box {
  border: 0.0625rem solid rgba(101, 109, 99, 0.1);
}
.discount-code_code-inner {
  display: flex;
  align-items: stretch;
}
.discount-code_code {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5625rem;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.5rem 1.375rem;
  background-color: var(--color--white);
  color: var(--color--dark);
  font-size: 1rem;
  line-height: 1.7;
}
.discount-code_tag-icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color--red);
}
.discount-code_code-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}
.discount-code_copy {
  flex: 0 0 15.5rem;
  min-height: 3.25rem;
  border-radius: 0;
}
.discount-code_status {
  min-height: 1.25rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--color--dark);
}
.discount-code_status:empty {
  min-height: 0;
}
.discount-code_inner.is-expired .discount-code_num {
  opacity: 0.4;
}

/* rechte Seite: Bild + Produkte */
.discount-code_aside {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.discount-code_media {
  position: absolute;
  inset: 0;
}
.discount-code_media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, center);
}
.discount-code_overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(3, 32, 9, 0.4);
}
.discount-code_products {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  padding: 5rem 2.5rem;
}
.discount-code_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.discount-code_item {
  width: 100%;
  max-width: 19.5rem;
}
.discount-code_bundle[hidden] {
  display: none;
}

/* Produktkarte */
.discount-code_card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 3.8125rem 0 rgba(0, 0, 0, 0.06);
  text-align: center;
}
.discount-code_card-media {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 17.9375rem;
  padding: 3.5rem 1.5rem 0;
}
.discount-code_badge {
  position: absolute;
  top: 0.96875rem;
  left: 0;
  z-index: 1;
}
.discount-code_card-image-link {
  display: block;
  width: 100%;
  height: 100%;
}
.discount-code_card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.discount-code_card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 1.875rem 1.875rem;
}
.discount-code_card-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.discount-code_card-title-link {
  color: inherit;
  text-decoration: none;
}
.discount-code_card-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color--dark);
}
.discount-code_card-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #656d63;
}
.discount-code_price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.625rem;
}
.discount-code_price-current {
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color--dark);
}
.discount-code_price-unit {
  display: inline-flex;
  font-size: 0.75rem;
  line-height: 1.7;
  color: #656d63;
}
.discount-code_qty {
  margin-top: -0.75rem;
  font-size: 0.75rem;
  color: #656d63;
}
.discount-code_add {
  min-height: 3.25rem;
  border-radius: 0;
}
@media (hover: hover) {
  .discount-code_card-title-link:hover .discount-code_card-title {
    color: var(--color--red);
  }
}

/* Layout: nur Rabattcode */
.discount-code_inner[data-layout="code"] {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 56.25rem;
  background-color: var(--color--dark);
}
.discount-code_inner[data-layout="code"] .discount-code_aside {
  position: absolute;
  inset: 0;
}
.discount-code_inner[data-layout="code"] .discount-code_products {
  display: none;
}
.discount-code_inner[data-layout="code"] .discount-code_content {
  align-items: center;
  max-width: 40rem;
  margin: 0 auto;
  padding: 10rem 1.5rem 6rem;
  text-align: center;
}
.discount-code_inner[data-layout="code"] .discount-code_eyebrow,
.discount-code_inner[data-layout="code"] .discount-code_title,
.discount-code_inner[data-layout="code"] .discount-code_text,
.discount-code_inner[data-layout="code"] .discount-code_status {
  color: var(--color--white);
}
.discount-code_inner[data-layout="code"] .discount-code_title {
  max-width: 34rem;
  font-size: 2.75rem;
}
.discount-code_inner[data-layout="code"] .discount-code_head {
  align-items: center;
}
.discount-code_inner[data-layout="code"] .discount-code_boxes {
  max-width: 33.75rem;
}

/* Layout: Raster */
.discount-code_inner[data-layout="raster"] {
  background-color: var(--color--white);
}
.discount-code_inner[data-layout="raster"] .discount-code_aside {
  align-items: flex-start;
  background-color: var(--color--grey, #f6f6f6);
}
.discount-code_inner[data-layout="raster"] .discount-code_media,
.discount-code_inner[data-layout="liste"] .discount-code_media {
  display: none;
}
.discount-code_inner[data-layout="raster"] .discount-code_list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.discount-code_inner[data-layout="raster"] .discount-code_item {
  max-width: none;
}
.discount-code_inner[data-layout="raster"] .discount-code_add {
  display: none;
}
.discount-code_inner[data-layout="raster"] .discount-code_card-media {
  height: 14rem;
}

/* Layout: untereinander, jede Karte auf eigenem Bild */
.discount-code_inner[data-layout="liste"] .discount-code_products {
  padding: 0;
}
.discount-code_inner[data-layout="liste"] .discount-code_list {
  gap: 0;
}
.discount-code_inner[data-layout="liste"] .discount-code_item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
  min-height: 45rem;
  padding: 3rem 2.5rem;
  background-color: var(--color--green, #5c7f53);
  background-image: linear-gradient(rgba(3, 32, 9, 0.4), rgba(3, 32, 9, 0.4)), var(--dc-item-bg, none);
  background-position: center;
  background-size: cover;
}
.discount-code_inner[data-layout="liste"] .discount-code_card {
  width: 100%;
  max-width: 19.5rem;
  height: auto;
}
.discount-code_inner[data-layout="liste"] .discount-code_bundle,
.discount-code_inner[data-layout="produkt"] .discount-code_bundle {
  display: none;
}

/* Tablet + Mobil */
@media (max-width: 991px) {
  .discount-code_inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .discount-code_content {
    max-width: none;
    padding: 4rem var(--space--24, 1.5rem) 3rem;
  }
  .discount-code_inner[data-layout="produkt"] .discount-code_aside {
    min-height: 40rem;
  }
  .discount-code_products {
    padding: 3rem var(--space--24, 1.5rem);
  }
  .discount-code_inner[data-layout="code"] {
    min-height: 44rem;
  }
  .discount-code_inner[data-layout="code"] .discount-code_content {
    padding: 9rem var(--space--24, 1.5rem) 4rem;
  }
}
@media (max-width: 767px) {
  .discount-code_title,
  .discount-code_inner[data-layout="code"] .discount-code_title {
    font-size: 1.75rem;
  }
  .discount-code_timer-inner {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
  }
  .discount-code_code-inner {
    flex-direction: column;
  }
  .discount-code_copy {
    flex-basis: auto;
  }
  .discount-code_inner[data-layout="raster"] .discount-code_list {
    grid-template-columns: minmax(0, 1fr);
  }
  .discount-code_inner[data-layout="liste"] .discount-code_item {
    min-height: 34rem;
    padding: 2.5rem var(--space--24, 1.5rem);
  }
}

/* ---------- 280. Rabattcode: Kategorie-Badge auf der Produktkarte wie Figma (weisse Schrift 12px Semibold, 24px hoch) ---------- */
.discount-code_badge {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 0.75rem;
  background-color: var(--color--green, #5c7f53);
  color: var(--color--white);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ---------- 281. Rabattcode-Karte wie Figma 11108-16922: Badge (staerker als .badge.is-square) 24px hoch, 12px weiss,
   15px von oben buendig links; Herz 16px rot rechts oben auf gleicher Hoehe ---------- */
.discount-code_card .badge.discount-code_badge {
  top: 0.96875rem;
  height: 1.5rem;
  min-height: 0;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 0;
  color: var(--color--white);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.03em;
}
.discount-code_favorite {
  position: absolute;
  top: 0.96875rem;
  right: 0.6875rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color--red);
  cursor: pointer;
  transition: transform var(--transition--fast, 0.2s);
}
.discount-code_favorite .icon-svg,
.discount-code_favorite svg {
  width: 1rem;
  height: 1rem;
}
@media (hover: hover) {
  .discount-code_favorite:hover {
    transform: scale(1.12);
  }
}

/* ---------- 282. Sales-Seite (Figma 11192-21947): Sales Hero (Bild mit Headline + freigestellten Produkten, weisse
   Rabattcode-Karte mit rotem Countdown-Balken) und Sales Set (3 Produktspalten mit Subgrid, roter Set-Balken) ---------- */
.section_sales-hero {
  position: relative;
}
.sales-hero_top {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 37.125rem;
  background-color: var(--color--dark);
}
.sales-hero_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, center);
}
.sales-hero_overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 40%), linear-gradient(rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24));
}
.sales-hero_wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}
.sales-hero_layout {
  position: relative;
  padding-bottom: 4.75rem;
}
.sales-hero_content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 39.875rem;
  color: var(--color--white);
}
.sales-hero_eyebrow {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.sales-hero_title {
  margin: 0;
  font-size: 3.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color--white);
}
.sales-hero_products {
  position: absolute;
  right: 0;
  bottom: -5.625rem;
  width: 37.875rem;
  max-width: 48%;
  height: auto;
  filter: drop-shadow(0 0.25rem 1.5rem rgba(0, 0, 0, 0.12));
}
.sales-hero_card-wrap {
  position: relative;
  z-index: 2;
  padding-top: 7.5rem;
}
.sales-hero_card {
  overflow: hidden;
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
  box-shadow: 0 0.25rem 3.8125rem 0 rgba(0, 0, 0, 0.06);
  text-align: center;
}
.sales-hero_card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.375rem;
  padding: 3.375rem 7.5rem;
}
.sales-hero_card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}
.sales-hero_script {
  margin: 0;
  font-family: var(--font--script);
  font-size: 2.75rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.66;
  letter-spacing: 0.002em;
  color: var(--color--dark);
}
.sales-hero_keywords {
  column-gap: 0.3125rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--color--dark);
  opacity: 0.7;
}
.sales-hero_text {
  max-width: 27.125rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color--dark);
}
.sales-hero_code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 33.5rem;
  margin-top: 1.9375rem;
}
.sales-hero_code .discount-code_code-box {
  width: 100%;
}
.sales-hero_note {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--color--dark);
  opacity: 0.7;
}
.sales-hero_timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.625rem;
  min-height: 5rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--color--red);
  color: var(--color--white);
}
.sales-hero_timer[hidden] {
  display: none;
}
.sales-hero_timer .discount-code_units {
  flex: none;
}
.sales-hero_timer-label {
  font-size: 1rem;
  line-height: 1.7;
}
.sales-hero_timer.is-expired .discount-code_num {
  opacity: 0.5;
}

.section_sales-set .sales-set_inner {
  padding-top: 6.25rem;
  padding-bottom: 6.25rem;
}
.sales-set_head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 3.75rem;
}
.sales-set_eyebrow {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  color: #656d63;
}
.sales-set_title {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--color--dark);
}
.sales-set_body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sales-set_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;
  gap: 0.125rem;
  overflow: hidden;
  border-radius: var(--radius--medium);
}
.sales-set_col {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  min-width: 0;
}
.sales-set_cell {
  min-width: 0;
  background-color: #f9f9f9;
}
.sales-set_cell.is-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18.9375rem;
  padding: 1.25rem 2rem;
}
.sales-set_img-link {
  display: block;
  width: 100%;
  height: 100%;
}
.sales-set_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sales-set_cell.is-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6875rem;
  padding: 2.5rem 3.75rem;
  text-align: center;
}
.sales-set_info-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.sales-set_name-link {
  color: inherit;
  text-decoration: none;
}
.sales-set_name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--color--dark);
}
.sales-set_text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  max-width: 15.375rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color--dark);
}
.sales-set_cell.is-acc {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 2.5rem 4.125rem;
}
.sales-set_cell.is-acc:empty {
  display: block;
}
.sales-set_acc-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color--dark);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  list-style: none;
  cursor: pointer;
}
.sales-set_acc-title::-webkit-details-marker {
  display: none;
}
.sales-set_acc-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--transition--fast, 0.2s);
}
.sales-set_acc[open] .sales-set_acc-icon {
  transform: rotate(90deg);
}
.sales-set_acc-body {
  padding-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color--dark);
}
.sales-set_cell.is-price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 2.5rem 4.125rem;
}
.sales-set_price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
}
.sales-set_price-current {
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--color--dark);
}
.sales-set_price-unit {
  display: inline-flex;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--color--dark);
}
.sales-set_tax {
  align-self: flex-start;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--color--dark);
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}
.sales-set_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.75rem 5rem;
  background-color: var(--color--red);
  color: var(--color--white);
}
.sales-set_bar-copy {
  display: flex;
  align-items: center;
  gap: 1.4375rem;
  min-width: 0;
}
.sales-set_bar-icon {
  flex: none;
  width: 3.125rem;
  height: 3.125rem;
}
.sales-set_bar-text {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}
.sales-set_bar-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.sales-set_bar-sub {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.sales-set_bar-buy {
  display: flex;
  flex: none;
  align-items: center;
  gap: 3rem;
}
.sales-set_bar-price {
  display: flex;
  align-items: center;
  gap: 0.46875rem;
  white-space: nowrap;
}
.sales-set_bar-current {
  font-size: 2rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.sales-set_bar-compare {
  font-size: 0.9375rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.66;
  text-decoration: line-through;
  opacity: 0.5;
}
.sales-set_bar-button {
  min-width: 15.5rem;
  min-height: 3.25rem;
  border-radius: 0;
  background-color: var(--color--white);
  color: var(--color--dark);
}
@media (hover: hover) {
  .sales-set_bar-button:hover {
    background-color: var(--color--dark);
    color: var(--color--white);
  }
  .sales-set_name-link:hover .sales-set_name {
    color: var(--color--red);
  }
}
.sales-set_status {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color--red);
}
.sales-set_status:empty {
  display: none;
}

@media (max-width: 991px) {
  .sales-hero_top {
    min-height: 34rem;
  }
  .sales-hero_title {
    font-size: 2.5rem;
  }
  .sales-hero_layout {
    padding-bottom: 9rem;
  }
  .sales-hero_products {
    right: 50%;
    bottom: -4rem;
    width: 26rem;
    max-width: 80%;
    transform: translateX(50%);
  }
  .sales-hero_card-wrap {
    padding-top: 6rem;
  }
  .sales-hero_card-body {
    padding: 2.5rem 1.5rem;
  }
  .sales-hero_timer {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
  }
  .section_sales-set .sales-set_inner {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .sales-set_grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 1rem;
    border-radius: 0;
  }
  .sales-set_col {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    gap: 0.125rem;
    overflow: hidden;
    border-radius: var(--radius--medium);
  }
  .sales-set_cell.is-info,
  .sales-set_cell.is-acc,
  .sales-set_cell.is-price {
    padding: 1.75rem 1.5rem;
  }
  .sales-set_bar {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.5rem;
  }
  .sales-set_bar-buy {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
  }
}
@media (max-width: 767px) {
  .sales-hero_title {
    font-size: 2rem;
  }
  .sales-hero_script {
    font-size: 2.125rem;
  }
  .sales-set_title {
    font-size: 1.75rem;
  }
  .sales-set_bar-button {
    width: 100%;
    min-width: 0;
  }
}

/* ---------- 283. Warenkorb-Karten ohne feste Mindesthoehe: gleicher Innenabstand oben/unten (24px) bei allen Artikeln,
   egal ob mit Variante (z. B. SonnenStund' 500 g) oder ohne ---------- */
.section_cart .cart_item {
  min-height: 0;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
@media (max-width: 767px) {
  .section_cart .cart_item {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* ---------- 284. PDP "Ideale Ergaenzungen" (Figma 11126-19730 / 12283-31418): Karte ohne feste Hoehe, mind. 145px,
   20px Innenabstand oben/unten, damit mit Preis nichts gequetscht wird. Name und Text 7px Abstand, Preis 19px darunter ---------- */
.section_product-header .product-header_cross-item {
  height: auto;
  min-height: 9.0625rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.section_product-header .product-header_cross-body {
  gap: 0.4375rem;
}
.section_product-header .product-header_cross-rating {
  margin-bottom: 0.5625rem;
}
.section_product-header .product-header_cross-link {
  margin-bottom: 0;
}
.section_product-header .product-header_cross-price {
  margin-top: 0.75rem;
}
@media (max-width: 767px) {
  .section_product-header .product-header_cross-item {
    height: auto;
    min-height: 8.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* ---------- 285. Rabattcode Raster wie Figma 11097-22681: links hellgrau, rechts das Hintergrundbild (wie "Ein Produkt"),
   Raster max. 592px (2 x 290px, 12px Spalten- / 16px Zeilenabstand) mittig in der rechten Haelfte, Bundle-Button darunter.
   Karten: Bildflaeche 285px mit groesserem Produkt, Text 70 % dunkel, Innenabstand 16 / 30 / 34px ---------- */
.discount-code_inner[data-layout="raster"] {
  background-color: var(--color--grey, #f6f6f6);
}
.discount-code_inner[data-layout="raster"] .discount-code_aside {
  align-items: flex-start;
  background-color: transparent;
}
.discount-code_inner[data-layout="raster"] .discount-code_media {
  display: block;
}
.discount-code_inner[data-layout="raster"] .discount-code_products {
  max-width: 43.25rem;
  margin: 0 auto;
  padding: 9.375rem 3.125rem 6rem;
}
.discount-code_inner[data-layout="raster"] .discount-code_list {
  column-gap: 0.75rem;
  row-gap: 1rem;
}
.discount-code_inner[data-layout="raster"] .discount-code_card-media {
  height: 17.8125rem;
  padding: 3.5rem 1.5rem 0;
}
.discount-code_card {
  box-shadow: 0 0 3.8125rem 0 rgba(0, 0, 0, 0.06);
}
.discount-code_card-img {
  transform: scale(1.15);
  transform-origin: center bottom;
}
.discount-code_card-body {
  gap: 1.28rem;
  padding: 1rem 1.875rem 2.125rem;
}
.discount-code_card-text {
  color: rgba(35, 46, 32, 0.7);
}
@media (max-width: 991px) {
  .discount-code_inner[data-layout="raster"] .discount-code_aside {
    min-height: 0;
  }
  .discount-code_inner[data-layout="raster"] .discount-code_products {
    max-width: none;
    padding: 3rem var(--space--24, 1.5rem);
  }
}
@media (max-width: 767px) {
  .discount-code_inner[data-layout="raster"] .discount-code_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.5rem;
    row-gap: 0.5rem;
  }
  .discount-code_inner[data-layout="raster"] .discount-code_card-media {
    height: 11rem;
    padding: 2.5rem 0.75rem 0;
  }
  .discount-code_inner[data-layout="raster"] .discount-code_card-body {
    padding: 0.75rem 0.75rem 1.25rem;
  }
  .discount-code_inner[data-layout="raster"] .discount-code_card-text {
    display: none;
  }
}

/* ---------- 286. Newsletter (Brevo): Vorname + E-Mail nebeneinander im Glasfeld, Button darunter ueber die ganze Breite,
   darunter Pflicht-Checkbox mit Einwilligungstext (Brevo-Feld OPT_IN) ---------- */
.newsletter-cta_form.is-brevo {
  flex-wrap: wrap;
}
.newsletter-cta_form.is-brevo .newsletter-cta_input {
  flex: 1 1 11rem;
}
.newsletter-cta_form.is-brevo .button {
  flex: 1 1 100%;
}
.newsletter-cta_consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  text-align: left;
}
.newsletter-cta_consent-input {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0.1875rem 0 0;
  accent-color: var(--color--red);
  cursor: pointer;
}
.newsletter-cta_consent-label {
  font-size: 0.75rem;
  line-height: 1.6;
  color: inherit;
  cursor: pointer;
}
.newsletter-cta_consent-text,
.newsletter-cta_consent-text p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
@media (max-width: 767px) {
  .newsletter-cta_form.is-brevo .newsletter-cta_input {
    flex-basis: 100%;
  }
}

/* ---------- 287. Newsletter: Hinweistext unter dem Formular ausblenden, wenn er leer ist (die Einwilligung steht jetzt
   an der Checkbox); Datenschutz-Link in der Einwilligung unterstrichen ---------- */
.newsletter-cta_note:empty,
.u-text-width:has(> .newsletter-cta_note:empty) {
  display: none;
}
.newsletter-cta_consent-text a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
  color: inherit;
}

/* ---------- 288. Newsletter (Brevo) mobil: Felder wieder volle Hoehe (52px) und volle Breite untereinander;
   Einwilligungstext und Datenschutz-Link weiss ---------- */
.section_newsletter-cta .newsletter-cta_consent,
.section_newsletter-cta .newsletter-cta_consent-text,
.section_newsletter-cta .newsletter-cta_consent-text p,
.section_newsletter-cta .newsletter-cta_consent-text a {
  color: var(--color--white);
}
.section_newsletter-cta .newsletter-cta_consent-text a {
  text-decoration-color: currentColor;
}
@media (max-width: 767px) {
  .newsletter-cta_form.is-brevo .newsletter-cta_input {
    flex: none;
    width: 100%;
    height: 3.25rem;
  }
  .newsletter-cta_form.is-brevo .button {
    flex: none;
    width: 100%;
  }
}

/* ---------- 289. Newsletter Danke-Zustand (Figma 12184-21662): nach erfolgreicher Brevo-Anmeldung ersetzt er Ueberschrift,
   Formular und Einwilligung. Eyebrow 17px, Titel 36px, Text 14px, "Wartezeit nutzen?" + Glas-Pillen mit Links ---------- */
.newsletter-cta_content.is-nl-success > :not(.newsletter-cta_form-block),
.newsletter-cta_content.is-nl-success .newsletter-cta_consent,
.newsletter-cta_content.is-nl-success .newsletter-cta_note,
.newsletter-cta_content.is-nl-success .u-text-width:has(> .newsletter-cta_note) {
  display: none;
}
.section_newsletter-cta .newsletter-cta_success {
  align-items: center;
  gap: 1.75rem;
  max-width: 39rem;
  margin: 0 auto;
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--color--white);
  text-align: center;
}
.section_newsletter-cta .newsletter-cta_success:focus {
  outline: none;
}
.newsletter-cta_success-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.section_newsletter-cta .newsletter-cta_success-eyebrow {
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  color: var(--color--white);
}
.section_newsletter-cta .newsletter-cta_success-title {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--color--white);
}
.section_newsletter-cta .newsletter-cta_success-text {
  max-width: 29.125rem;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color--white);
}
.section_newsletter-cta .newsletter-cta_success-text p {
  margin: 0;
}
.newsletter-cta_success-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.newsletter-cta_success-links-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.04em;
  color: var(--color--white);
}
.newsletter-cta_pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4375rem;
}
.newsletter-cta_pill {
  display: inline-flex;
  align-items: center;
  padding: 0.6875rem 1.125rem 0.5625rem;
  border-radius: var(--radius--pill, 100px);
  background-color: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.08);
  color: var(--color--white);
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition--fast, 0.2s);
}
@media (hover: hover) {
  .newsletter-cta_pill:hover {
    background-color: rgba(255, 255, 255, 0.4);
  }
}
.newsletter-cta_pill:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.125rem;
}
@media (max-width: 767px) {
  .section_newsletter-cta .newsletter-cta_success-eyebrow {
    font-size: 0.9375rem;
  }
  .section_newsletter-cta .newsletter-cta_success-title {
    font-size: 1.625rem;
  }
  .newsletter-cta_success-links-title {
    font-size: 0.8125rem;
  }
  .newsletter-cta_pills {
    max-width: 18.4375rem;
  }
}

/* ---------- 290. Newsletter Danke-Zustand: volle Breite fuer den Inhalt, damit die 4 Pillen wie in Figma in einer Reihe stehen ---------- */
.newsletter-cta_content.is-nl-success .newsletter-cta_form-block {
  max-width: 39rem;
  width: 100%;
}
.newsletter-cta_content.is-nl-success .newsletter-cta_form-el {
  width: 100%;
}

/* ---------- 291. Produkt Story-Titel: jetzt <p> statt <h3> (Heading-Hierarchie),
   Optik wie vorher (kein p-Abstand, ausbalancierter Umbruch) ---------- */
.product-header_story-title {
  margin: 0;
  text-wrap: balance;
}

/* ---------- 292. Karriere Hero: leeres Element ausblenden (Link "Offene Stellen"
   gibt es nur auf Deutsch, die Stellenanzeigen sind nicht uebersetzt) ---------- */
.career-hero_item:not(:has(a)) {
  display: none;
}

/* ---------- 293. Produkt Header: Mengenfeld exakt so hoch wie der Warenkorb-Button
   (gleiche Hoehe per stretch, kein Schatten unter dem Feld) ---------- */
.product-header_buy-wrappper {
  align-items: stretch;
}
.product-header_buy-wrappper .form_input.is-quantity {
  height: auto;
  margin: 0;
  box-shadow: none;
}

/* ---------- 294. Ueber uns Werte: als Slider (Mobil) bis an beide Bildschirmraender
   scrollen statt an der Inhaltskante abgeschnitten zu werden; erste Karte bleibt
   auf der Inhaltskante ausgerichtet ---------- */
@media (max-width: 767px) {
  .about-values_grid {
    margin-left: calc(-1 * var(--space--20));
    margin-right: calc(-1 * var(--space--20));
    padding-left: var(--space--20);
    padding-right: var(--space--20);
    scroll-padding-left: var(--space--20);
    scroll-padding-right: var(--space--20);
  }
}

/* ---------- 295. Markenwelt Tabs mobil: Tabs behalten ihre Breite und die Leiste
   scrollt seitlich, wenn sie nicht passt; weiche Kante zeigt, dass es weitergeht.
   Beim Antippen wird der Tab mittig in die Leiste gescrollt (Script in der Section) ---------- */
@media (max-width: 767px) {
  .is-layout-tabs .brand-world_tabs {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .is-layout-tabs .brand-world_tabs::-webkit-scrollbar {
    display: none;
  }
  .brand-world_tab {
    flex: 0 0 auto;
  }
  .is-layout-tabs .brand-world_tabs.is-overflow:not(.is-start):not(.is-end) {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
  }
  .is-layout-tabs .brand-world_tabs.is-overflow.is-start:not(.is-end) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%);
  }
  .is-layout-tabs .brand-world_tabs.is-overflow.is-end:not(.is-start) {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem);
    mask-image: linear-gradient(to right, transparent 0, #000 1.5rem);
  }
}

/* ---------- 296. Karriere Intro: Slider-Pfeile ab Tablet abwaerts ausblenden
   (dort wird gewischt) ---------- */
@media (max-width: 991px) {
  .section_career-intro .career-intro_nav {
    display: none;
  }
}

/* ---------- 297. Formulare: Auswahlfelder (Anrede, Land ...) zeigen ihre Beschriftung
   wie ein Platzhalter mittig im Feld, solange nichts gewaehlt ist; nach der Auswahl
   oder beim Oeffnen rutscht sie nach oben wie bei den Textfeldern ---------- */
.section_contact-form .kontakt-form_field.is-select:has(option[value=""]:checked):not(:focus-within) .kontakt-form_label {
  top: 1.625rem;
  transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1.7;
}
.section_dealer-form .dealer-form_field.is-select:has(option[value=""]:checked):not(:focus-within) .dealer-form_label {
  top: 1.875rem;
  transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1.7;
}
.section_dl-access .dl-access_field.is-select:has(option[value=""]:checked):not(:focus-within) .dl-access_label {
  top: 1.625rem;
  transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1.7;
}
.section_job-apply .job-apply_field.is-select:has(option[value=""]:checked):not(:focus-within) .job-apply_label {
  top: 1.625rem;
  transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1.7;
}

/* ---------- 298. Haken in Checkboxen und Pfeile in Auswahlfeldern wieder sichtbar:
   der Konverter entfernt die Anfuehrungszeichen um eingebettete SVG-Grafiken, dadurch
   wurden sie ungueltig. Hier vollstaendig kodiert (ohne Leerzeichen/Hochkommas) ---------- */
.form_checkbox:has(input:checked) div.form_checkbox-icon {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2016%27%20fill=%27none%27%3E%3Cpath%20d=%27M3%208.5L6.5%2012L13%204.5%27%20stroke=%27white%27%20stroke-width=%272%27/%3E%3C/svg%3E);
}
.sort_select {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2016%27%20fill=%27none%27%3E%3Cpath%20d=%27M4%206l4%204%204-4%27%20stroke=%27%2337352f%27%20stroke-width=%271.5%27/%3E%3C/svg%3E);
}
.filter_form_checkbox-icon.is-checked {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2016%27%20fill=%27none%27%3E%3Cpath%20d=%27M3%208.5L6.5%2012L13%204.5%27%20stroke=%27white%27%20stroke-width=%272%27/%3E%3C/svg%3E);
}
.section_dl-access .dl-access_check-input:checked {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2016%27%20fill=%27none%27%3E%3Cpath%20d=%27M3%208.5L6.5%2012L13%204.5%27%20stroke=%27white%27%20stroke-width=%272%27/%3E%3C/svg%3E);
}
.section_dealer-form .dealer-form_check-input:checked {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2016%27%20fill=%27none%27%3E%3Cpath%20d=%27M3%208.5L6.5%2012L13%204.5%27%20stroke=%27white%27%20stroke-width=%272%27/%3E%3C/svg%3E);
}
.section_contact-form .kontakt-form_check-input:checked {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2016%27%20fill=%27none%27%3E%3Cpath%20d=%27M3%208.5L6.5%2012L13%204.5%27%20stroke=%27white%27%20stroke-width=%272%27/%3E%3C/svg%3E);
}

/* Eingabefelder mit weniger als 16 px Schrift: iOS-Safari zoomt beim Antippen hinein.
   16 px verhindern das, ohne das Zoomen fuer Nutzer zu sperren */
.section_newsletter-cta .newsletter-cta_form .newsletter-cta_input {
  font-size: 1rem;
}
.form_input.is-quantity,
.form_input.is-text-area {
  font-size: 1rem;
}

/* ---------- 299. Social Media: dieselbe weisse Trennlinie (2 px) wie zwischen roter
   Karte und Beitraegen auch unter der Section, auf Desktop und Mobil ---------- */
.section_social-media .social-media_layout {
  border-bottom: 0.125rem solid var(--color--white);
}

/* ---------- 300. Newsletter: Einwilligungs-Checkbox eckig (wie die Formular-Checkboxen),
   Einwilligung um den Rahmenabstand des Glasfelds eingerueckt, damit Checkbox und Text
   buendig mit den Eingabefeldern stehen ---------- */
.section_newsletter-cta .newsletter-cta_consent {
  padding-left: var(--space--4);
  padding-right: var(--space--4);
}
.section_newsletter-cta .newsletter-cta_consent-input {
  width: 1rem;
  height: 1rem;
  border: 0.0625rem solid var(--color--white);
  border-radius: 0;
  background-color: var(--color--white);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 0.75rem;
  -webkit-appearance: none;
  appearance: none;
}
.section_newsletter-cta .newsletter-cta_consent-input:checked {
  border-color: var(--color--red);
  background-color: var(--color--red);
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2016%27%20fill=%27none%27%3E%3Cpath%20d=%27M3%208.5L6.5%2012L13%204.5%27%20stroke=%27white%27%20stroke-width=%272%27/%3E%3C/svg%3E);
}
.section_newsletter-cta .newsletter-cta_consent-input:focus {
  outline: none;
}
.section_newsletter-cta .newsletter-cta_consent-input:focus-visible {
  outline: 0.125rem solid var(--color--white);
  outline-offset: 0.125rem;
}

/* ---------- 301. Blog-Filter: Leiste scrollt zum aktiven Tab (Script in der Section),
   weiche Kante zeigt, dass weitere Kategorien folgen ---------- */
.section_blog-index .blog-index_tabs.is-overflow:not(.is-start):not(.is-end) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
}
.section_blog-index .blog-index_tabs.is-overflow.is-start:not(.is-end) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%);
}
.section_blog-index .blog-index_tabs.is-overflow.is-end:not(.is-start) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem);
  mask-image: linear-gradient(to right, transparent 0, #000 1.5rem);
}

/* ---------- 302. Touch: grauen Tipp-Kasten von iOS/Android ausblenden.
   Kein eigener Tipp-Effekt; Fokusrahmen fuer Tastatur bleiben unveraendert ---------- */
html {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 303. Lexikon: ganze Karte klickbar (Titel-Link spannt sich ueber die Karte),
   Hover faerbt Titel und "Weiterlesen", Fokusrahmen um die ganze Karte ---------- */
.section_lexicon-index .lexicon-index_entry {
  position: relative;
}
.section_lexicon-index .lexicon-index_title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.section_lexicon-index .lexicon-index_title-link:focus-visible {
  outline: none;
}
.section_lexicon-index .lexicon-index_entry:has(.lexicon-index_title-link:focus-visible) {
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.25rem;
}
@media (hover: hover) {
  .section_lexicon-index .lexicon-index_entry:hover .lexicon-index_title-link,
  .section_lexicon-index .lexicon-index_entry:hover .lexicon-index_more {
    color: var(--color--red);
  }
}

/* ---------- 304. Mobiles Menue: Logo oben links im Kopf des Menues, Pfeil fuer externe
   Links (z. B. Campus, Verlag) wie in der Top-Bar ---------- */
.nav_drawer-head {
  justify-content: space-between;
  align-items: flex-start;
}
.nav_drawer-logo {
  display: block;
  height: 3.5rem;
  aspect-ratio: 312 / 230;
  pointer-events: auto;
}
.nav_drawer-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.nav_drawer-logo-text {
  font-weight: 700;
  font-style: italic;
  color: var(--color--brand-red);
}
.nav_drawer-logo:focus-visible {
  outline: 0.125rem solid var(--color--dark);
  outline-offset: 0.125rem;
}
.nav_drawer-external {
  display: inline-flex;
  align-items: center;
  margin-left: 0.375rem;
  font-size: 0.75rem;
  line-height: 0;
}

/* ---------- 305. Mobiles Menue als Vollbild, Logo mittig ganz oben wie in der Navigation;
   Pfeil fuer externe Links in der Navigation kraeftiger und rot ---------- */
@media (max-width: 991px) {
  .nav_drawer {
    width: 100%;
    box-shadow: none;
  }
  .nav_drawer-logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 5.25rem;
  }
  .nav_drawer-head {
    justify-content: flex-end;
  }
  .nav_drawer-scroll {
    padding-top: 7rem;
  }
}
.nav_drawer-external,
.nav_topbar-external {
  color: var(--color--red);
}
.nav_drawer-external .icon-svg path,
.nav_topbar-external .icon-svg path {
  stroke: currentColor;
  stroke-width: 0.6;
}

/* ---------- 306. Produkt-Seitenpanels: Vor/Zurueck-Buttons teilen sich die Breite und brechen
   bei langen Titeln auf zwei Zeilen um statt ueberzulaufen; Pfeil bleibt neben dem Text ---------- */
.sidecard .sidecard_nav {
  align-items: stretch;
}
.sidecard .sidecard_nav-btn {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(50% - 0.375rem);
  white-space: normal;
  text-align: left;
  overflow-wrap: break-word;
}
.sidecard .sidecard_nav-btn:only-child {
  max-width: 100%;
}
.sidecard .sidecard_nav-btn.is-next {
  text-align: right;
}
.sidecard .sidecard_nav-icon {
  flex: none;
}

/* ---------- 307. Mobiles Menue: fester weisser Kopfbereich (Logo + Schliessen), unter dem die
   Menuepunkte durchscrollen; sobald gescrollt wurde, leichter Schatten unter dem Kopf ---------- */
@media (max-width: 991px) {
  .nav_drawer-head {
    align-items: center;
    height: 5.25rem;
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--color--white);
    pointer-events: auto;
    transition: box-shadow var(--transition--fast);
  }
  .nav_drawer-head.is-scrolled {
    box-shadow: 0 0.25rem 1rem rgba(35, 46, 32, 0.08);
  }
}

/* ---------- 308. Mobiles Menue offen: Seite dahinter laesst sich nicht scrollen
   (Klasse wird per Alpine gesetzt, solange das Menue offen ist) ---------- */
@media (max-width: 991px) {
  html.is-menu-locked,
  html.is-menu-locked body {
    overflow: hidden;
  }
  html.is-menu-locked .nav_drawer-backdrop {
    touch-action: none;
  }
}

/* ---------- 310. Mobiles Menue: Kopfleiste so hoch wie die Navigation (74 px), Logo (84 px) haengt
   genau wie in der Navigation 10 px nach unten ueber die Leiste hinaus, Schliessen-Button etwas kleiner ---------- */
@media (max-width: 991px) {
  .nav_drawer-head {
    height: 4.625rem;
    overflow: visible;
  }
  .nav_drawer-logo {
    z-index: 1;
  }
  .nav_drawer-close {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
  }
}

/* ---------- 311. Basenwelt Varianten-Slider mobil: Bild immer ganz oben in der Karte,
   alle Karten gleich hoch; Restplatz entsteht unten im Text statt ueber dem Bild ---------- */
@media (max-width: 767px) {
  .section_guide-variants .guide-variants_card {
    flex-direction: column;
    justify-content: flex-start;
  }
  .section_guide-variants .guide-variants_media {
    order: -1;
    flex: none;
  }
  .section_guide-variants .guide-variants_content {
    flex: 1 1 auto;
  }
}

/* ---------- 312. Basenwelt "Drei gute Gruende" als Slider (Mobil): wie Block 294 bis an
   beide Bildschirmraender scrollen statt links an der Inhaltskante abgeschnitten ---------- */
@media (max-width: 767px) {
  .section_guide-benefits .guide-benefits_grid,
  .section_guide-benefits .guide-benefits_wrap[class*="is-count-"] .guide-benefits_grid {
    margin-left: calc(-1 * var(--space--20));
    margin-right: calc(-1 * var(--space--20));
    padding-left: var(--space--20);
    padding-right: var(--space--20);
    scroll-padding-left: var(--space--20);
    scroll-padding-right: var(--space--20);
  }
}

/* ---------- 313. Basenwelt-Tabellen (Lebensmittel-Tabelle, Tabelle): wenn sie seitlich
   scrollen (Tablet/Mobil), laeuft der Scrollbereich bis an die Bildschirmraender; am Anfang
   und Ende bleibt der normale Seitenrand. Runde Ecken sitzen dafuer an der Tabelle selbst ---------- */
@media (max-width: 991px) {
  .section_guide-foodtable .guide-foodtable_scroll,
  .section_guide-table .guide-table_scroll {
    margin-left: calc(-1 * var(--space--40));
    margin-right: calc(-1 * var(--space--40));
    padding-left: var(--space--40);
    padding-right: var(--space--40);
    scroll-padding-left: var(--space--40);
    scroll-padding-right: var(--space--40);
    border-radius: 0;
  }
  .section_guide-foodtable .guide-foodtable_table > thead > tr:first-child > :first-child {
    border-top-left-radius: 0.625rem;
  }
  .section_guide-foodtable .guide-foodtable_table > thead > tr:first-child > :last-child {
    border-top-right-radius: 0.625rem;
  }
  .section_guide-foodtable .guide-foodtable_table > tbody > tr:last-child > :first-child {
    border-bottom-left-radius: 0.625rem;
  }
  .section_guide-foodtable .guide-foodtable_table > tbody > tr:last-child > :last-child {
    border-bottom-right-radius: 0.625rem;
  }
  .section_guide-table .guide-table > thead > tr:first-child > :first-child {
    border-top-left-radius: 0.625rem;
  }
  .section_guide-table .guide-table > thead > tr:first-child > :last-child {
    border-top-right-radius: 0.625rem;
  }
  .section_guide-table .guide-table > tbody > tr:last-child > :first-child {
    border-bottom-left-radius: 0.625rem;
  }
  .section_guide-table .guide-table > tbody > tr:last-child > :last-child {
    border-bottom-right-radius: 0.625rem;
  }
}
@media (max-width: 767px) {
  .section_guide-foodtable .guide-foodtable_scroll,
  .section_guide-table .guide-table_scroll {
    margin-left: calc(-1 * var(--space--20));
    margin-right: calc(-1 * var(--space--20));
    padding-left: var(--space--20);
    padding-right: var(--space--20);
    scroll-padding-left: var(--space--20);
    scroll-padding-right: var(--space--20);
  }
}

/* ---------- 314. Lebensmittel-Tabelle: zusammengehoerige Gruppen-Koepfe (z. B. "80 %" ueber zwei
   Spalten) ohne weisse Trennlinie dazwischen und ohne gruenen Fleck in der weissen Linie darunter.
   Statt Schatten-Trick wird der rechte Rand der vorderen Zelle einfach weggelassen ---------- */
.section_guide-foodtable .guide-foodtable_group:has(+ .guide-foodtable_group.is-continued) {
  border-right-width: 0;
}
.section_guide-foodtable .guide-foodtable_group.is-continued.is-col-2,
.section_guide-foodtable .guide-foodtable_group.is-continued.is-col-3,
.section_guide-foodtable .guide-foodtable_group.is-continued.is-col-4 {
  box-shadow: none;
}

/* ---------- 315. Basenwelt Split-Section: leerer Block-Bereich (keine Tags/Buttons) wird nicht
   mehr ausgegeben, damit unter dem Text kein zusaetzlicher Abstand (Gap) entsteht ---------- */
.section_guide-split .guide-split_blocks:not(:has(*)) {
  display: none;
}

/* ---------- 316. Basenwelt Split-Sections mobil: folgen zwei direkt aufeinander, wird der
   Abstand dazwischen halbiert (unten in der ersten, oben in der zweiten je halber Wert) ---------- */
@media (max-width: 767px) {
  .section_guide-split:has(+ .section_guide-split) .guide-split_inner .guide-split_content,
  .section_guide-split:has(+ .section_guide-split) .guide-split_inner:not(:has(.guide-split_img)) .guide-split_content {
    padding-bottom: calc(var(--section-pb-m, 3rem) / 2);
  }
  .section_guide-split + .section_guide-split .guide-split_inner .guide-split_media,
  .section_guide-split + .section_guide-split .guide-split_inner.is-media-left .guide-split_media {
    margin-top: calc(var(--section-pt-m, 3rem) / 2);
  }
  .section_guide-split + .section_guide-split .guide-split_inner:not(:has(.guide-split_img)) .guide-split_content {
    padding-top: calc(var(--section-pt-m, 3rem) / 2);
  }
}

/* ---------- 317. Basenwelt-Tabellen: nur seitlich scrollbar, nicht vertikal
   (die Tabelle ragt durch ihren negativen Rand 2 px ueber, das erzeugte einen vertikalen Scroll) ---------- */
.section_guide-table .guide-table_scroll,
.section_guide-foodtable .guide-foodtable_scroll {
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
.section_guide-table .guide-table_scroll {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

/* ---------- 318. Fokuspunkt aus Shopify (Bild > Fokuspunkt festlegen) fuer alle zugeschnittenen
   Bilder: das Bild bekommt --focal nur, wenn ein eigener Fokuspunkt gesetzt ist (nicht 50%/50%);
   dann bestimmt er den Ausschnitt, sonst bleibt der bisherige Ausschnitt aus dem Design ---------- */
img[style*="--focal:"] {
  object-position: var(--focal) !important;
}

/* ---------- 319. Newsroom-Themen: Leiste scrollt wie beim Blog zum aktiven Tab (Script in der
   Section), weiche Kante zeigt, dass weitere Themen folgen ---------- */
.section_newsroom-index .newsroom-index_topics.is-overflow:not(.is-start):not(.is-end) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
}
.section_newsroom-index .newsroom-index_topics.is-overflow.is-start:not(.is-end) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%);
}
.section_newsroom-index .newsroom-index_topics.is-overflow.is-end:not(.is-start) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem);
  mask-image: linear-gradient(to right, transparent 0, #000 1.5rem);
}
@media (max-width: 767px) {
  .section_newsroom-index .newsroom-index_topics {
    width: calc(100% + 2 * var(--space--20));
    margin-left: calc(-1 * var(--space--20));
    margin-right: calc(-1 * var(--space--20));
    padding-left: var(--space--20);
    padding-right: var(--space--20);
    scroll-padding-left: var(--space--20);
    scroll-padding-right: var(--space--20);
  }
}

/* ---------- 320. Downloads (Desktop): Kategorie-Filter links bleibt beim Scrollen sichtbar
   (sticky unter der Navigation: Top-Bar 34 px + Leiste 72 px + 32 px Abstand); auf Tablet/Mobil wie bisher als aufklappbarer Filter ---------- */
.section_downloads .downloads_sidebar {
  position: sticky;
  top: calc(var(--nav--topbar-height, 2.125rem) + 4.5rem + 2rem);
  align-self: start;
}
@media (max-width: 991px) {
  .section_downloads .downloads_sidebar {
    position: static;
  }
}

/* ---------- 321. FAQ-Themen: Leiste scrollt wie Blog und Newsroom zum angetippten Thema
   (Script in der Section), weiche Kante zeigt, dass weitere Themen folgen ---------- */
.section_faq .faq_filter.is-overflow:not(.is-start):not(.is-end) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
}
.section_faq .faq_filter.is-overflow.is-start:not(.is-end) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%);
}
.section_faq .faq_filter.is-overflow.is-end:not(.is-start) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem);
  mask-image: linear-gradient(to right, transparent 0, #000 1.5rem);
}

/* ---------- 322. Alle weiteren seitlich scrollbaren Tab-/Filter-Leisten (Termine, Suche,
   Stellen-Filter, Karriere-Tabs, Basenwelt-Chips, Chip-Reihen): Leiste scrollt zum angetippten bzw.
   aktiven Eintrag (zentrales Script im Layout), weiche Kante zeigt, dass es weitergeht ---------- */
.lf-tabscroll.is-overflow:not(.is-start):not(.is-end) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
}
.lf-tabscroll.is-overflow.is-start:not(.is-end) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%);
}
.lf-tabscroll.is-overflow.is-end:not(.is-start) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem);
  mask-image: linear-gradient(to right, transparent 0, #000 1.5rem);
}

/* ---------- 323. Rezepte-Slider Tablet/Mobil: Slider laeuft rechts wirklich bis an den
   Bildschirmrand (die globale Swiper-Breite 100% hob die negativen Raender aus Block 113
   auf, die Karten wurden vor dem Rand abgeschnitten) ---------- */
@media (max-width: 991px) {
  .section_inner .recipe-slider_swiper {
    width: auto;
  }
}

/* ---------- 324. Termine-Filter: jeder Tab nur so breit wie sein Text (plus Innenabstand),
   statt fester Breite (Desktop 150px, Tablet mindestens 120px) ---------- */
.section_event-index .event-index_tab {
  width: auto;
  min-width: 0;
}

/* ---------- 325. Espace Pro (nur FR): zwei Info-Karten (bestehende Haendler / noch kein Konto)
   ueber der grauen Formular-Karte; Formular-Einleitung mit Telefonnummer, Adresse Pur Aliment
   darunter. Formular-Felder nutzen die Styles des Haendler-Formulars ---------- */
.section_espace-pro .espace-pro_cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space--24);
  width: 100%;
  max-width: 63.75rem;
  margin-left: auto;
  margin-right: auto;
}
.section_espace-pro .espace-pro_card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space--16);
  padding: var(--space--48);
  border: 0.0625rem solid var(--border-color--primary);
  border-radius: var(--radius--medium);
  background-color: var(--color--white);
}
.section_espace-pro .espace-pro_card-title {
  margin: 0;
  color: var(--color--dark);
  font-size: var(--font-size--h5);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--tracking--heading);
}
.section_espace-pro .espace-pro_card-text {
  color: #656d63;
  font-size: var(--font-size--body);
  line-height: 1.7;
}
.section_espace-pro .espace-pro_card-text p {
  margin: 0;
}
.section_espace-pro .espace-pro_card-text p + p {
  margin-top: var(--space--12);
}
.section_espace-pro .espace-pro_card-button {
  margin-top: auto;
}
.section_espace-pro .espace-pro_form-intro {
  margin: 0;
  color: var(--color--dark);
  font-size: var(--font-size--body);
  line-height: 1.7;
}
.section_espace-pro .espace-pro_phone {
  color: var(--color--red);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.section_espace-pro .espace-pro_hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.section_espace-pro .dealer-form_success,
.section_espace-pro .dealer-form_alert {
  outline: none;
}
.section_espace-pro .dealer-form_success p,
.section_espace-pro .dealer-form_alert p {
  margin: 0;
}
.section_espace-pro .espace-pro_address {
  max-width: 37.25rem;
  margin-left: auto;
  margin-right: auto;
  color: #656d63;
  font-size: var(--font-size--body-3);
  line-height: 1.6;
  text-align: center;
}
.section_espace-pro .espace-pro_address p {
  margin: 0;
}
@media (hover: hover) {
  .section_espace-pro .espace-pro_phone:hover {
    text-decoration: underline;
  }
}
@media (max-width: 991px) {
  .section_espace-pro .espace-pro_card {
    padding: var(--space--32);
  }
}
@media (max-width: 767px) {
  .section_espace-pro .espace-pro_cards {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space--16);
  }
  .section_espace-pro .espace-pro_card {
    padding: var(--space--28) var(--space--20);
  }
  .section_espace-pro .espace-pro_card-button {
    width: 100%;
  }
}

/* ---------- 326. Nur-Franzoesisch-Menuepunkte (Espace Pro): in den anderen Sprachen wird der
   Menuepunkt in Hauptmenue, Mobil-Menue und Footer ausgeblendet (Markierung per Liquid) ---------- */
.nav_menu-dropdown:has(.lf-locale-hide),
.nav_drawer-group:has(.lf-locale-hide),
.footer_link:has(.lf-locale-hide) {
  display: none !important;
}

/* ---------- 326b. Shop-Seiten im Footer (z. B. Widerrufsbelehrung): ausgeblendet, solange der
   Besucher keine Preise sieht (pa_ok-Logik, Markierung per Liquid) ---------- */
.footer_link:has(.lf-shop-hide),
.footer_legal-item:has(.lf-shop-hide) {
  display: none !important;
}

/* ---------- 327. Stellen-Filter (Tablet/Mobil): Leiste nicht mehr seitlich scrollbar, damit die
   aufklappenden Dropdown-Listen nicht abgeschnitten werden; Filter brechen stattdessen um ---------- */
@media (max-width: 991px) {
  .section_jobs-list .jobs-list_filters {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- 328. Stellen-Filter: geoeffnetes Dropdown bleibt grau statt dunkelgruen ---------- */
.section_jobs-list .lf-dd.is-open:not(.is-sort) > .lf-dd_toggle {
  border-color: transparent;
  background-color: var(--color--grey);
  color: var(--color--dark);
}
.section_jobs-list .lf-dd.is-open:not(.is-sort) > .lf-dd_toggle .lf-dd_icon,
.section_jobs-list .lf-dd.is-open:not(.is-sort) > .lf-dd_toggle .lf-dd_value,
.section_jobs-list .lf-dd.is-open:not(.is-sort) > .lf-dd_toggle .lf-dd_count {
  color: var(--color--red);
}
@media (hover: hover) {
  .section_jobs-list .lf-dd.is-open:not(.is-sort) > .lf-dd_toggle:hover {
    border-color: transparent;
    background-color: var(--color--grey-dark);
    color: var(--color--dark);
  }
}

/* ---------- 329. Basin-Formulare (Kontakt, Händler, Download, Bewerbung, Espace Pro): Erfolg auf
   derselben Seite, Honeypot, Turnstile, Datei-Upload Bewerbung ---------- */
form.is-sent > :not([data-form-success]) {
  display: none !important;
}
[data-form-success][hidden],
[data-form-error][hidden] {
  display: none !important;
}
[data-form-success]:focus,
[data-form-error]:focus {
  outline: none;
}
.form_hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.form_turnstile.is-visible {
  margin-top: var(--space--16);
}
.section_job-apply .job-apply_docs {
  position: relative;
}
.section_job-apply .job-apply_file {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.section_job-apply .job-apply_docs:focus-within {
  outline: 2px solid var(--color--red);
  outline-offset: 2px;
}
.section_job-apply .job-apply_docs.is-invalid {
  outline: 2px solid var(--color--error-dark);
  outline-offset: 2px;
}
.section_job-apply .job-apply_docs.is-filled {
  display: none;
}
.section_job-apply .job-apply_file-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background-color: var(--color--white);
}
.section_job-apply .job-apply_file-card[hidden] {
  display: none;
}
.section_job-apply .job-apply_file-card-icon {
  display: inline-flex;
  flex: none;
  color: var(--color--red);
  line-height: 0;
}
.section_job-apply .job-apply_file-card-icon .icon-svg {
  width: 1.75rem;
  height: 1.75rem;
}
.section_job-apply .job-apply_file-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 0.125rem;
}
.section_job-apply .job-apply_file-card-name {
  color: var(--color--dark);
  font-size: var(--font-size--body-3);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.section_job-apply .job-apply_file-card-size {
  color: #656d63;
  font-size: var(--font-size--body-3);
  line-height: 1.4;
}
.section_job-apply .job-apply_file-remove {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color--grey);
  color: var(--color--dark);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.section_job-apply .job-apply_file-remove .icon-svg {
  width: 1rem;
  height: 1rem;
}
@media (hover: hover) {
  .section_job-apply .job-apply_file-remove:hover {
    background-color: var(--color--grey-dark);
  }
}

/* ---------- 330. Button im Fließtext (z. B. Hinweisgeberschutz-Seite): Button-Stil statt Textlink ---------- */
.text-rich-text a.button {
  margin-top: var(--space--8);
  color: var(--color--white);
  text-decoration: none;
  white-space: normal;
}
@media (hover: hover) {
  .text-rich-text a.button:hover {
    color: var(--color--white);
  }
}

/* ---------- 331. Footer: Cookie-Einstellungen (nur sichtbar, wenn Shopifys Cookie-Banner geladen ist) ---------- */
.footer_legal-item[hidden] {
  display: none !important;
}

/* ---------- 332. Social Media: Elfsight-Feed erst nach Marketing-Einwilligung, vorher Hinweis ---------- */
.social-media_elfsight-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  gap: var(--space--12);
  min-height: 20rem;
  padding: var(--space--32) var(--space--24);
  border-radius: var(--radius--small);
  background-color: var(--color--neutral-lightest);
  text-align: center;
}
.social-media_elfsight-consent-title,
.social-media_elfsight-consent-text {
  margin: 0;
}
.social-media_elfsight-consent-text {
  max-width: 28rem;
}
.social-media_elfsight-consent .button {
  max-width: 100%;
  margin-top: var(--space--8);
  white-space: normal;
}
.social-media_elfsight-consent .social-media_elfsight-consent-link {
  margin-top: var(--space--4);
}
.social-media_elfsight.is-consented .social-media_elfsight-consent {
  display: none;
}
.social-media_elfsight:not(.is-consented) > [class^="elfsight-app-"] {
  display: none;
}
/* Hinweis fuellt die Flaeche (Seitenverhaeltnis bleibt), waechst aber mit, wenn der Text mehr Platz braucht */
.social-media_elfsight:not(.is-consented) {
  display: flex;
  flex-direction: column;
  min-height: auto;
}

.section_dealer-locator .dealer-locator_frame {
  position: relative;
}
.map-consent {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: #f6f6f6;
  text-align: center;
}
.map-consent[hidden] {
  display: none;
}
.map-consent_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 32rem;
}
.map-consent_title {
  margin: 0;
}
.map-consent_text {
  margin: 0;
}
.map-consent_link {
  color: inherit;
  text-decoration: underline;
}
.map-consent_remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
}
.map-consent_checkbox {
  width: 1rem;
  height: 1rem;
  margin: 0;
}
.map-consent_revoke {
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  cursor: pointer;
}
.map-consent_revoke[hidden] {
  display: none;
}
.dealer-overlay_panel .map-consent_revoke {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  margin: 0;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  background-color: #fff;
}
.form_privacy-note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}
.form_privacy-link {
  color: inherit;
  text-decoration: underline;
}
.skip-link {
  position: absolute;
  top: -10rem;
  left: 1rem;
  z-index: 10000;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  background-color: #fff;
  color: #1d1d1b;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 1rem;
  outline: 0.125rem solid var(--color--focus);
  outline-offset: 0.125rem;
}
.main-wrapper:focus {
  outline: none;
}
/* Shopify-Richtlinien (/policies/...) im Look der Seite Rechtliches */
.page-wrapper .shopify-policy__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.125rem;
  max-width: none;
  margin: 0;
  padding: var(--_spacing---section-space--medium) var(--space--80) var(--_spacing---section-space--large);
}
.page-wrapper .shopify-policy__container:focus {
  outline: none;
}
.page-wrapper .shopify-policy__title {
  margin: 0;
  text-align: center;
}
.page-wrapper .shopify-policy__title h1 {
  max-width: 42.5rem;
  margin: 0;
  color: var(--color--dark);
  font-size: 3.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.03em;
}
.page-wrapper .shopify-policy__body {
  width: 100%;
  max-width: 63.75rem;
  padding: 5rem;
  border-radius: 0.625rem;
  background-image: linear-gradient(181deg, #fafafa 5.26%, #fffcfc 65.37%, #ebebeb 117.58%);
}
.page-wrapper .shopify-policy__body .rte {
  color: var(--color--grey-text, #656d63);
  font-size: var(--font-size--body-1, 1rem);
  line-height: 1.7;
}
.page-wrapper .shopify-policy__body .rte > :first-child {
  margin-top: 0;
}
.page-wrapper .shopify-policy__body .rte > :last-child {
  margin-bottom: 0;
}
.page-wrapper .shopify-policy__body .rte h2 {
  margin: 5rem 0 2rem;
  color: var(--color--dark);
  font-size: var(--font-size--h3, 2rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.page-wrapper .shopify-policy__body .rte h3,
.page-wrapper .shopify-policy__body .rte h4 {
  margin: 2.5rem 0 0.5rem;
  color: var(--color--dark);
  font-size: var(--font-size--h4, 1.5rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.page-wrapper .shopify-policy__body .rte h2 + h3,
.page-wrapper .shopify-policy__body .rte h2 + h4 {
  margin-top: 0;
}
.page-wrapper .shopify-policy__body .rte p,
.page-wrapper .shopify-policy__body .rte ul,
.page-wrapper .shopify-policy__body .rte ol {
  margin: 0 0 1em;
}
.page-wrapper .shopify-policy__body .rte h3 + p,
.page-wrapper .shopify-policy__body .rte h4 + p {
  margin-top: 0;
}
.page-wrapper .shopify-policy__body .rte ul,
.page-wrapper .shopify-policy__body .rte ol {
  padding-left: 1.25em;
}
.page-wrapper .shopify-policy__body .rte a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.page-wrapper .shopify-policy__body .rte strong {
  color: var(--color--dark);
}
@media (max-width: 991px) {
  .page-wrapper .shopify-policy__container {
    padding-left: var(--space--40);
    padding-right: var(--space--40);
  }
  .page-wrapper .shopify-policy__body {
    padding: 3rem;
  }
}
@media (max-width: 767px) {
  .page-wrapper .shopify-policy__container {
    gap: 2rem;
    padding-left: var(--space--20);
    padding-right: var(--space--20);
  }
  .page-wrapper .shopify-policy__title h1 {
    font-size: 2.25rem;
  }
  .page-wrapper .shopify-policy__body {
    padding: 2rem 1.25rem;
  }
  .page-wrapper .shopify-policy__body .rte h2 {
    margin: 3rem 0 1.5rem;
    font-size: 1.625rem;
  }
  .page-wrapper .shopify-policy__body .rte h3,
  .page-wrapper .shopify-policy__body .rte h4 {
    margin-top: 2rem;
    font-size: 1.25rem;
  }
}
.footer_legal-link.is-button {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}