/* ==========================================================================
   kulston.com — Stylesheet (Quelle der Wahrheit)
   Tokens 1:1 aus der Design-Referenz (design/markup/*.html).
   Keine Inline-Styles im gerenderten HTML, keine Media Queries ohne Grund.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — lokal, Variable Font, Faces je Gewicht einzeln (Leitfaden 9.1)
   -------------------------------------------------------------------------- */

/* latin-ext */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300; font-stretch: 100%; font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* latin */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300; font-stretch: 100%; font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Flaechen */
  --kul-bg:            #f6f5f2;   /* Seitenhintergrund */
  --kul-bg-weiss:      #ffffff;   /* Header, Karten, Inputs */
  --kul-bg-platzhalter:#ebe9e4;   /* Bildflaechen vor dem Laden */
  --kul-bg-dunkel:     #121212;   /* Footer */
  --kul-bg-hero:       #3a2c22;   /* Hero-Buehne hinter dem Bild */

  /* Text */
  --kul-text:          #141414;
  --kul-text-weich:    #2a2a2a;
  --kul-text-grau:     #444444;
  --kul-text-muted:    #666666;
  --kul-text-invers:   #ffffff;
  --kul-text-invers-muted: #b5b3ad;

  /* Linien */
  --kul-linie-header:  #ecebe7;
  --kul-linie:         #e3e1dc;
  --kul-linie-stark:   #d9d7d1;
  --kul-linie-input:   #cfcdc6;
  --kul-linie-dunkel:  #333333;
  --kul-linie-swatch:  #9a9890;

  /* Signal */
  --kul-ok:            #3d7a4f;   /* "Auf Lager" */
  --kul-fehler:        #a3321f;   /* Validierungshinweis */
  --kul-hinweis:       #c08a2b;

  /* Mass */
  /* Seitenverhaeltnis der Produktfotos. Die Vorlage zeichnet 4:5; die
     gelieferten Fotos sind 1632x2048 = 51:64. Mit 4:5 wuerden sie um
     0,4 % beschnitten. Die Box folgt deshalb dem Bild, nicht umgekehrt —
     zusammen mit object-fit:contain ist damit kein Beschnitt moeglich. */
  --kul-produktbild:   51 / 64;

  --kul-max:           1440px;    /* Aeussere Bahn */
  --kul-inhalt:        1280px;    /* Inhaltsbreite in Header/Footer */
  --kul-rand:          clamp(20px, 7vw, 80px);
  --kul-header-h:      96px;

  --kul-font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   3. Basis — Bricks-Defaults neutralisieren (Leitfaden 9.2)
   Bricks vererbt line-height 1.7 global und 1.4 auf Ueberschriften; die
   Design-Referenz setzt keine -> normal. Ohne das sitzt jede Zeile anders.
   -------------------------------------------------------------------------- */

.kul-page {
  background: var(--kul-bg);
  color: var(--kul-text);
  font-family: var(--kul-font);
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

.kul-page :where(h1, h2, h3, h4, h5, h6) {
  line-height: normal;
  font-family: inherit;
}

.kul-page a { color: inherit; text-decoration: none; }
.kul-page a:where(:hover, :focus-visible) { color: inherit; }

.kul-page img { max-width: 100%; height: auto; }

/* Bricks stylt generische Tags per Element-Selektor (Leitfaden 4.3). */
.kul-page blockquote { font-family: inherit; font-size: inherit; margin: 0; padding-left: 0; border-left: 0; }
.kul-page blockquote cite { font-family: inherit; text-transform: none; opacity: 1; font-style: normal; }
.kul-page figure { margin: 0; }
.kul-page figcaption { text-align: left; }

/* Sichtbarer Fokus — wird an mehreren Stellen mit all:unset erschlagen. */
.kul-page :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--kul-text);
  outline-offset: 2px;
}

/* Nur fuer Screenreader. */
.kul-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Bricks-Wrapper neutralisieren (Leitfaden 2.1 / 4.1)
   Section/Container/Block sind Flex-Spalten mit align-items:center — ein
   max-width-Kind schrumpft darin auf Inhaltsbreite. width:100% ist der Fix.
   -------------------------------------------------------------------------- */

.kul-inner {
  display: block;
  width: 100%;
  max-width: var(--kul-max);
  margin-inline: auto;
  padding-inline: var(--kul-rand);
}

/* Bahn, die sich am 1280er Inhaltsraster ausrichtet (Header/Footer). */
.kul-bahn {
  display: block;
  width: 100%;
  padding-inline: max(var(--kul-rand), calc((100% - var(--kul-inhalt)) / 2));
}

/* Bricks-Block hat width:100% als Default — Inhaltsbreite zuruecksetzen. */
.kul-auto { width: auto; }

/* Anker duerfen nicht unter dem Sticky-Header verschwinden. */
.kul-page :target { scroll-margin-top: calc(var(--kul-header-h) + 16px); }
.kul-page [id] { scroll-margin-top: calc(var(--kul-header-h) + 16px); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

/* Bricks umschliesst das Header-Template mit <header id="brx-header">.
   Das Kleben muss an diesem aeusseren Element haengen — ein sticky auf dem
   inneren Element kaeme nie zum Tragen, weil sein Elternteil genauso hoch
   ist und ihm kein Weg zum Wandern bleibt.
   Bricks' eigener Sticky-Modus ist bewusst AUS: er arbeitet mit
   position:fixed und reserviert keinen Platz (siehe build.php). */
#brx-header {
  position: sticky;
  top: 0;
  z-index: 20;
}

.kul-header {
  background: var(--kul-bg-weiss);
  border-bottom: 1px solid var(--kul-linie-header);
}

.kul-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--kul-header-h);
  width: 100%;
  padding-inline: max(var(--kul-rand), calc((100% - var(--kul-inhalt)) / 2));
}

.kul-header__nav {
  display: flex;
  gap: 44px;
  font-size: 19px;
  font-weight: 500;
  min-width: 0;
}

.kul-header__nav a { white-space: nowrap; }
.kul-header__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.kul-header__logo { display: flex; color: var(--kul-text); justify-self: center; }
.kul-header__logo svg { width: 64px; height: 64px; display: block; }

.kul-header__aktionen {
  display: flex;
  gap: 34px;
  justify-content: flex-end;
  align-items: center;
  width: auto;
}

.kul-header__aktion {
  all: unset;
  cursor: pointer;
  display: flex;
  position: relative;
  color: var(--kul-text);
}
.kul-header__aktion svg { width: 26px; height: 26px; display: block; }

/* Leer = kein Inhalt im Warenkorb. Das Element bleibt trotzdem im Dokument,
   damit der AJAX-Kauf es per Fragment austauschen kann. */
.kul-header__zaehler:empty { display: none; }

.kul-header__zaehler {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--kul-text);
  color: var(--kul-text-invers);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Burger und ausklappbare Navigation erscheinen erst in der mobilen Stufe.
   Beide muessen hier ausgeschaltet werden, nicht erst in der Media Query —
   sonst traegt das Panel oberhalb der Umschaltbreite zur Header-Hoehe bei
   (gemessen: 117px statt 97px). */
.kul-header__burger { display: none; }
.kul-header__mobil  { display: none; }

/* --------------------------------------------------------------------------
   6. Buttons
   Der Design-Button ist zweigeteilt: Beschriftung + quadratisches Pfeilfeld.
   Buttons sind <a> -> ein generischer Link-Hover wuerde durchschlagen
   (Leitfaden 4.6), deshalb alle Zustaende hier explizit.
   -------------------------------------------------------------------------- */

.kul-page .kul-btn {
  display: inline-flex;
  align-items: stretch;
  height: 54px;
  background: var(--kul-bg-weiss);
  color: var(--kul-text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: normal;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform .25s ease;
}
.kul-page .kul-btn:hover { transform: translateY(-2px); color: var(--kul-text); }

.kul-btn__label {
  display: flex;
  align-items: center;
  padding: 0 22px 0 24px;
  white-space: nowrap;
}

.kul-btn__pfeil {
  width: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kul-text);
  color: var(--kul-text-invers);
  font-size: 20px;
  transition: width .25s ease;
}
.kul-page .kul-btn:hover .kul-btn__pfeil { width: 64px; }

/* Dunkle Variante: Produktseite, Warenkorb, Kasse. */
.kul-page .kul-btn--dunkel {
  background: var(--kul-text);
  color: var(--kul-text-invers);
  height: 58px;
  width: 100%;
  transform: none;
}
.kul-page .kul-btn--dunkel:hover { background: #000; transform: none; color: var(--kul-text-invers); }
.kul-btn--dunkel .kul-btn__label { flex: 1; padding: 0 24px; }
.kul-btn--dunkel .kul-btn__pfeil {
  width: 58px;
  background: var(--kul-bg-weiss);
  color: var(--kul-text);
  border: 1px solid var(--kul-text);
}
.kul-page .kul-btn--dunkel:hover .kul-btn__pfeil { width: 58px; }
.kul-page .kul-btn--dunkel[disabled] { opacity: .45; cursor: not-allowed; }

/* Textlink mit Pfeil ("Alle Produkte →"). */
.kul-page .kul-mehr {
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
  font-size: 18px;
  font-weight: 600;
}
.kul-page .kul-mehr:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Unterstrichener Link ("Mehr über kulston"). */
.kul-page .kul-mehr--unterstrichen {
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}
.kul-page .kul-mehr--unterstrichen:hover { text-decoration: none; }

/* Pillen-Filter (Shop-Kategorien). */
.kul-page .kul-pille {
  /* inline-flex statt der Default-Darstellung: die Pillen werden als <a>
     ausgegeben, und ein Inline-Element zentriert seinen Text weder
     senkrecht noch waagerecht in einer festen Hoehe. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
  height: 40px;
  padding: 0 16px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  border-radius: 4px;
  border: 1px solid var(--kul-linie-stark);
  background: var(--kul-bg-weiss);
  color: var(--kul-text);
  white-space: nowrap;
}
.kul-page .kul-pille[aria-current="true"],
.kul-page .kul-pille--aktiv {
  background: var(--kul-text);
  color: var(--kul-text-invers);
  border-color: var(--kul-text);
}
.kul-page .kul-pille:hover { border-color: var(--kul-text); color: var(--kul-text); }
.kul-page .kul-pille[aria-current="true"]:hover { color: var(--kul-text-invers); }

/* --------------------------------------------------------------------------
   7. Formulare
   -------------------------------------------------------------------------- */

.kul-feld { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }

.kul-page :where(.kul-input, .kul-select, .kul-textarea) {
  height: 52px;
  width: 100%;
  padding: 0 16px;
  font: inherit;
  font-size: 16px;
  line-height: normal;
  border: 1px solid var(--kul-linie-input);
  border-radius: 4px;
  background: var(--kul-bg-weiss);
  color: var(--kul-text);
  outline-color: var(--kul-text);
}
.kul-page .kul-textarea { height: auto; padding: 14px 16px; min-height: 120px; }
.kul-page .kul-select { cursor: pointer; }

.kul-page .kul-input::placeholder { color: var(--kul-text-muted); }

/* Sortier-Select im Shop: dunkler Rahmen statt Input-Grau. */
.kul-page .kul-select--sortieren {
  height: 40px;
  padding: 0 34px 0 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 38px;
  border-color: var(--kul-text);
  /* Eigenes Pfeilchen: die Browser-Darstellung sitzt je nach System anders
     und bricht die Ausrichtung der Leiste. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23141414' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.kul-filterleiste__sortieren label { display: flex; align-items: center; }

/* Newsletter-Zeile: Input und Pfeil-Button in einem Rahmen. */
.kul-newsletter { max-width: 400px; width: 100%; }
.kul-newsletter__feld {
  display: flex;
  align-items: center;
  height: 52px;
  width: 100%;
  border: 1px solid var(--kul-text);
  border-radius: 4px;
  padding: 0 6px 0 18px;
  background: var(--kul-bg-weiss);
}
.kul-newsletter__feld:focus-within { outline: 2px solid var(--kul-text); outline-offset: 2px; }
.kul-page .kul-newsletter input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 18px;
  background: transparent;
  color: var(--kul-text);
  height: 100%;
}
.kul-page .kul-newsletter button {
  all: unset;
  cursor: pointer;
  width: 50px;
  height: 50px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--kul-text);
}
.kul-page .kul-newsletter button:focus-visible { outline: 2px solid var(--kul-text); outline-offset: 2px; }
/* Honigtopf gegen Bots: fuer Menschen unsichtbar, fuer Bots ausfuellbar. */
.kul-page .kul-newsletter .kul-newsletter__falle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}
.kul-newsletter__meldung {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--kul-text);
}
.kul-newsletter__meldung[hidden] { display: none; }
.kul-newsletter__meldung--fehler { color: var(--kul-fehler, #b3261e); }
.kul-newsletter__hinweis {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--kul-text-grau);
}
.kul-newsletter__hinweis a { text-decoration: underline; }
.kul-newsletter__feld--laedt { opacity: .6; }

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */

.kul-footer {
  background: var(--kul-bg-dunkel);
  color: var(--kul-text-invers);
  padding-block: 40px;
  padding-inline: max(var(--kul-rand), calc((100% - var(--kul-inhalt)) / 2));
}

.kul-footer__oben {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--kul-linie-dunkel);
}

.kul-footer__marke { padding-top: 28px; flex: 1 1 300px; }
.kul-footer__wortmarke { font-size: 44px; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.kul-footer__claim { font-weight: 300; font-size: 30px; letter-spacing: -.01em; white-space: nowrap; }

.kul-footer__spalte { flex: 0 1 160px; }
.kul-footer__titel { font-size: 18px; font-weight: 600; margin-bottom: 18px; }
.kul-footer__links { display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.kul-page .kul-footer__links a { color: var(--kul-text-invers-muted); }
.kul-page .kul-footer__links a:hover { color: var(--kul-text-invers); }

.kul-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-content: flex-start;
  padding-top: 4px;
}
.kul-footer__social a { display: flex; }
.kul-footer__social img { width: 24px; height: 24px; }

.kul-footer__unten {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  font-size: 15px;
  color: var(--kul-text-invers-muted);
}
.kul-footer__recht { display: flex; gap: 12px 36px; flex-wrap: wrap; }

/* Sprachumschalter im Header: links neben Suche, Konto und Warenkorb.
   Dieselbe Optik wie die Navigation, nur kleiner — er soll da sein, aber
   nicht mit den Symbolen konkurrieren. */
.kul-header__sprachen {
  display: flex;
  align-items: center;
  margin-right: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
}
.kul-header__sprachen .kul-sprachen { gap: 6px; }
.kul-header__sprachen .kul-sprachen__trenner { color: var(--kul-text-muted); opacity: 1; }
.kul-page .kul-header__sprachen .kul-sprachen__aktiv { color: var(--kul-text); }
.kul-page .kul-header__sprachen .kul-sprachen a { color: var(--kul-text-muted); text-decoration: none; }
.kul-page .kul-header__sprachen .kul-sprachen a:hover,
.kul-page .kul-header__sprachen .kul-sprachen a:focus-visible { color: var(--kul-text); }

/* Unter der Umschaltbreite wird der Platz oben rechts knapp — dort traegt
   der Footer die Sprachwahl. */
@media (max-width: 560px) {
  .kul-header__sprachen { display: none; }
}

/* Sprache und Waehrung unten rechts. In der Vorlage steht dort "DE | €";
   sobald es eine zweite Sprache mit Inhalten gibt, wird die Sprache
   anklickbar: "DE / EN | €". */
.kul-footer__region { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.kul-sprachen { display: inline-flex; align-items: center; gap: 8px; }
.kul-sprachen__trenner,
.kul-footer__trenner { color: var(--kul-text-invers-muted); opacity: .6; }
.kul-page .kul-sprachen__aktiv { color: var(--kul-text-invers); }
.kul-page .kul-sprachen a { color: var(--kul-text-invers-muted); }
.kul-page .kul-sprachen a:hover,
.kul-page .kul-sprachen a:focus-visible { color: var(--kul-text-invers); }
.kul-page .kul-footer__unten a { color: var(--kul-text-invers-muted); }
.kul-page .kul-footer__unten a:hover { color: var(--kul-text-invers); }

/* --------------------------------------------------------------------------
   9. Abschnitte und Ueberschriften
   -------------------------------------------------------------------------- */

.kul-sek { padding-block: 0; }
.kul-sek__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.kul-page .kul-h1 { margin: 0; font-size: clamp(34px, 4.4vw, 56px); font-weight: 400; letter-spacing: -.03em; line-height: .98; text-wrap: pretty; }
.kul-page .kul-h2 { margin: 0; font-size: clamp(30px, 3.6vw, 46px); font-weight: 400; letter-spacing: -.03em; line-height: 1.08; text-wrap: pretty; }
.kul-page .kul-h2--klein { font-size: clamp(22px, 2.1vw, 27px); font-weight: 500; letter-spacing: -.01em; }
.kul-page .kul-h3 { margin: 0; font-size: clamp(20px, 1.9vw, 24px); font-weight: 500; letter-spacing: -.015em; line-height: 1.18; text-wrap: pretty; }

.kul-eyebrow { font-size: 13px; letter-spacing: .08em; color: var(--kul-text-muted); text-transform: uppercase; }
.kul-lead { margin: 0; font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.kul-fliess { margin: 0; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.kul-klein { font-size: 14px; color: var(--kul-text-muted); line-height: 1.6; }

.kul-brotkrumen { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--kul-text-muted); }
.kul-brotkrumen [aria-current] { color: var(--kul-text); }

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */

/* Fokuspunkt, Zoom und Höhe kommen als CSS-Variablen vom Hero-Element.
   Mobil überschreibt das Element sie bei Bedarf in einer Media Query. */
.kul-hero {
  --kul-hero-x: 50%;
  --kul-hero-y: 50%;
  --kul-hero-zoom: 1;
  --kul-hero-h: clamp(420px, 56vw, 640px);

  position: relative;
  height: var(--kul-hero-h);
  overflow: hidden;
  background: var(--kul-bg-hero);
  width: 100%;
}

.kul-hero__bild { position: absolute; inset: 0; }
.kul-hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* object-position bestimmt, welcher Teil stehen bleibt; derselbe Punkt ist
     der Ursprung des Zooms, damit beim Heranholen genau diese Stelle bleibt. */
  object-position: var(--kul-hero-x) var(--kul-hero-y);
  transform: scale(var(--kul-hero-zoom));
  transform-origin: var(--kul-hero-x) var(--kul-hero-y);
}

/* Diagonaler Verlauf hinter der Textspalte. Unterhalb der Umstapel-Grenze
   (Abschnitt 14) wird er flaechig, sonst reisst der Kontrast (Leitfaden 9.6). */
.kul-hero__verlauf {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Zwei Verläufe statt eines: der diagonale aus der Design-Vorlage, plus ein
     dezenter von unten. Der Text sitzt unten links — gemessen mit den
     hellsten 10 % des Hintergrunds reicht der Verlauf der Vorlage allein auf
     dem hellen Platzmotiv nicht (Leitfaden 9.6/12.3). */
  background:
    linear-gradient(0deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.06) 42%, rgba(0,0,0,0) 62%),
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.1) 55%, rgba(0,0,0,0) 100%);
}

.kul-hero__text {
  position: absolute;
  left: max(var(--kul-rand), calc((100% - var(--kul-inhalt)) / 2));
  bottom: clamp(48px, 7vw, 90px);
  /* Inhaltsbreite statt bis zum rechten Rand: der Textblock soll nur so breit
     sein wie sein Inhalt — sonst liegt sein Kasten über dem hellen Teil des
     Motivs und jede Kontrastmessung misst Hintergrund, der gar keinen Text
     trägt. */
  width: max-content;
  max-width: min(680px, calc(100% - 2 * var(--kul-rand)));
  color: var(--kul-text-invers);
  pointer-events: none;
}

.kul-hero__wortmarke {
  font-size: clamp(56px, 9.5vw, 120px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .9;
  margin-left: -.065em;
}
.kul-hero__claim {
  font-weight: 300;
  font-size: clamp(28px, 4.3vw, 54px);
  line-height: 1;
  margin: -4px 0 0 -.09em;
  letter-spacing: -.02em;
}
.kul-hero__cta { pointer-events: auto; margin-top: clamp(24px, 3.3vw, 42px); }

/* --------------------------------------------------------------------------
   11. Produktraster und -karte
   Spaltenzahl explizit statt auto-fit raten lassen (Leitfaden 9.5) — sonst
   entstehen 5+1- und 4+2-Umbrueche, die Kunden sofort sehen.
   -------------------------------------------------------------------------- */

.kul-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 14px;
}
.kul-raster--eng { gap: 32px 14px; }

.kul-karte__bild {
  aspect-ratio: var(--kul-produktbild);
  background: var(--kul-bg-platzhalter);
  position: relative;
  width: 100%;
  overflow: hidden;
}
.kul-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kul-karte__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--kul-bg-weiss);
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}

.kul-karte__meta { padding: 16px 8px 0; }
.kul-karte__link { font-size: 17px; line-height: 1.4; display: block; min-width: 0; }
.kul-karte__name { font-weight: 500; }
.kul-karte__preis { display: flex; gap: 8px; flex-wrap: wrap; }
.kul-karte__preis s { color: #777; }

.kul-farben { display: flex; gap: 12px; flex-wrap: wrap; padding: 14px 8px 0; }

.kul-page .kul-swatch {
  display: block;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 0;
  flex: none;
  cursor: pointer;
  border: 1px solid var(--kul-linie-swatch);
  outline: 1.5px solid transparent;
  outline-offset: 2px;
}
.kul-swatch[aria-pressed="true"] { outline-color: var(--kul-text); }
.kul-swatch--gross { width: 32px; height: 32px; outline-offset: 3px; }

/* --------------------------------------------------------------------------
   12. Produktseite
   -------------------------------------------------------------------------- */

.kul-pdp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 64px;
  align-items: start;
}

/* Galerie einspaltig: alle Bilder gleich breit untereinander. Dadurch wird
   die linke Spalte hoeher als die rechte — die Produktinfo bleibt beim
   Scrollen stehen (position:sticky weiter unten), bis das letzte Bild
   durchgelaufen ist. */
/* Das hidden-Attribut setzt display:none — aber nur im Browser-Stylesheet.
   Jede eigene display-Regel auf der Klasse schlaegt es. Ohne diese Zeile
   stehen alle Farbstrecken untereinander auf der Seite. */
.kul-pdp__galerie[hidden] { display: none; }

.kul-pdp__galerie {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}
.kul-pdp__bild { aspect-ratio: var(--kul-produktbild); background: var(--kul-bg-platzhalter); overflow: hidden; }
.kul-pdp__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Die Infospalte klebt, solange die Bildspalte noch laeuft. 'start' sorgt
   dafuer, dass sie oben andockt statt auf Rasterhoehe gestreckt zu werden. */
.kul-pdp__spalte {
  position: sticky;
  top: calc(var(--kul-header-h) + 32px);
  align-self: start;
  max-width: 520px;
  min-width: 0;
}

.kul-pdp__titel { margin: 10px 0 0; font-size: clamp(32px, 3.8vw, 48px); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.kul-pdp__preis { margin-top: 18px; font-size: 26px; font-weight: 500; }

.kul-merkmale { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.kul-merkmal {
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--kul-linie-stark);
  border-radius: 4px;
  background: var(--kul-bg-weiss);
  font-size: 14px;
  font-weight: 500;
}

.kul-wahl { margin-top: 28px; }
.kul-wahl__titel { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.kul-wahl__titel span { font-weight: 400; }

.kul-groessen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.kul-page .kul-groesse {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 48px;
  padding: 0 4px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--kul-linie-stark);
  background: var(--kul-bg-weiss);
  color: var(--kul-text);
}
.kul-page .kul-groesse:hover:not([disabled]) { border-color: var(--kul-text); }
.kul-page .kul-groesse[aria-pressed="true"] { border-color: var(--kul-text); background: var(--kul-text); color: var(--kul-text-invers); }
.kul-page .kul-groesse[disabled] { cursor: not-allowed; color: var(--kul-text-muted); text-decoration: line-through; background: transparent; }

.kul-lager { margin-top: 24px; display: flex; align-items: center; gap: 10px; font-size: 15px; }
.kul-lager__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--kul-ok); flex: none; }
.kul-lager--aus .kul-lager__punkt { background: var(--kul-fehler); }

.kul-pdp__hinweise { margin-top: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--kul-text-grau); }
.kul-pdp__fehler { margin-top: 10px; font-size: 14px; color: var(--kul-fehler); }

/* Akkordeon */
.kul-akkordeon { margin-top: 32px; border-top: 1px solid var(--kul-linie-stark); }
.kul-akkordeon__eintrag { border-bottom: 1px solid var(--kul-linie-stark); }
.kul-akkordeon__knopf {
  all: unset;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 500;
  box-sizing: border-box;
}
.kul-akkordeon__zeichen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 22px;
  font-weight: 300;
  line-height: 0;
  flex: none;
}
.kul-akkordeon__inhalt { padding: 0 0 22px; font-size: 16px; line-height: 1.6; }
.kul-akkordeon__inhalt p { margin: 0 0 12px; }
.kul-akkordeon__inhalt ul { margin: 0; padding-left: 18px; }

/* Definitionsraster (Material, Versand, GPSR) */
.kul-defs { display: flex; flex-direction: column; gap: 8px; }
.kul-def { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.kul-def > :first-child { color: var(--kul-text-muted); }

/* Groessentabelle */
.kul-page .kul-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; text-align: left; }
.kul-page .kul-tabelle th { padding: 6px 0; font-weight: 500; color: var(--kul-text-muted); }
.kul-page .kul-tabelle td { padding: 8px 0; }
.kul-page .kul-tabelle tbody tr { border-top: 1px solid var(--kul-linie); }
.kul-page .kul-tabelle td:first-child { color: var(--kul-text-muted); }

/* USP-Block unter der Produktseite */
.kul-usp { background: var(--kul-bg-weiss); }
.kul-usp__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; margin-top: 48px; }
.kul-usp__punkt { border-top: 1px solid var(--kul-text); padding-top: 18px; }
.kul-usp__nr { font-size: 14px; color: var(--kul-text-muted); }
.kul-usp__titel { margin-top: 10px; font-size: 24px; font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
.kul-usp__text { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--kul-text-grau); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   13. Shop, Warenkorb, Kasse, Konto
   -------------------------------------------------------------------------- */

/* Filterleiste klebt unter dem Header. */
.kul-filterleiste {
  position: sticky;
  top: var(--kul-header-h);
  z-index: 10;
  background: var(--kul-bg);
  border-bottom: 1px solid var(--kul-linie);
  width: 100%;
}
.kul-filterleiste__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 16px;
}
.kul-filterleiste__pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.kul-filterleiste__sortieren { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.kul-filterleiste__sortieren > span { color: var(--kul-text-muted); }

/* Zweispaltiges Layout: Liste links, klebrige Zusammenfassung rechts. */
.kul-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
  gap: 48px 64px;
  align-items: start;
}
.kul-split--kasse { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); gap: 48px 80px; }

.kul-aside {
  position: sticky;
  top: calc(var(--kul-header-h) + 32px);
  background: var(--kul-bg-weiss);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.kul-aside__zeile { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; }
.kul-aside__zeile--gesamt { font-size: 20px; font-weight: 600; }
.kul-aside__trenner { border-top: 1px solid var(--kul-linie-stark); margin: 6px 0; }
.kul-aside__fuss { font-size: 14px; color: var(--kul-text-muted); margin-top: -8px; }

/* Fortschritt zum versandkostenfreien Einkauf. */
.kul-versandbalken { height: 4px; background: var(--kul-bg-platzhalter); }
.kul-versandbalken__fuellung { height: 4px; background: var(--kul-text); max-width: 100%; }

/* Warenkorb-Zeile */
.kul-wk { border-top: 1px solid var(--kul-linie-stark); min-width: 0; }
.kul-wk__zeile {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--kul-linie-stark);
  align-items: start;
}
.kul-wk__bild { aspect-ratio: var(--kul-produktbild); background: var(--kul-bg-platzhalter); overflow: hidden; }
.kul-wk__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kul-wk__name { font-size: 19px; font-weight: 500; }
.kul-wk__detail { margin-top: 6px; font-size: 15px; color: var(--kul-text-muted); }
.kul-wk__lager { margin-top: 4px; font-size: 14px; color: var(--kul-ok); }
.kul-wk__aktionen { margin-top: 18px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.kul-wk__summe { font-size: 19px; font-weight: 500; text-align: right; white-space: nowrap; }
.kul-wk__einzel { font-size: 14px; font-weight: 400; color: var(--kul-text-muted); margin-top: 4px; }

.kul-menge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--kul-linie-input);
  border-radius: 4px;
  background: var(--kul-bg-weiss);
  height: 42px;
  width: max-content;
}

.kul-page .kul-menge__knopf {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 38px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--kul-text);
  user-select: none;
}
.kul-page .kul-menge__knopf:disabled { opacity: .3; cursor: not-allowed; }
.kul-page .kul-menge__knopf:hover:not(:disabled) { background: var(--kul-bg); }

/* Das Zahlenfeld ist die Quelle der Wahrheit — die Spinner des Browsers
   braucht daneben niemand mehr. */
.kul-page .kul-menge__feld {
  width: 44px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: var(--kul-text);
  -moz-appearance: textfield;
  appearance: textfield;
}
.kul-page .kul-menge__feld::-webkit-outer-spin-button,
.kul-page .kul-menge__feld::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kul-page .kul-menge__feld:focus-visible { outline: 2px solid var(--kul-text); outline-offset: -2px; }

.kul-menge--fest { padding-inline: 14px; }
.kul-menge__wert { min-width: 28px; text-align: center; font-size: 16px; font-weight: 500; }

.kul-page .kul-entfernen { all: unset; cursor: pointer; font-size: 15px; text-decoration: underline; }

/* Auswahlkachel (Versandart, Zahlungsart) */
.kul-option {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--kul-bg-weiss);
  border-radius: 4px;
  border: 1px solid var(--kul-linie-input);
  width: 100%;
}
.kul-option[aria-checked="true"] { border-color: var(--kul-text); }
.kul-option__radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--kul-text);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.kul-option__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.kul-option[aria-checked="true"] .kul-option__radio::after { background: var(--kul-text); }
.kul-option__text { flex: 1; min-width: 0; }
.kul-option__label { display: block; font-size: 16px; font-weight: 500; }
.kul-option__sub { display: block; font-size: 14px; color: var(--kul-text-muted); margin-top: 2px; }
.kul-option__preis { font-size: 16px; font-weight: 500; white-space: nowrap; }

/* Kasse: nummerierte Schritte */
.kul-schritt { display: flex; flex-direction: column; gap: 18px; }
.kul-schritt__titel { display: flex; gap: 14px; align-items: baseline; }
.kul-schritt__nr { font-size: 15px; color: var(--kul-text-muted); font-weight: 500; }
.kul-feldpaar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kul-feldpaar .kul-feld--voll { grid-column: 1 / -1; }

.kul-check { display: flex; gap: 10px; align-items: center; font-size: 15px; cursor: pointer; line-height: 1.5; }
.kul-check--oben { align-items: flex-start; gap: 12px; }
.kul-check input { width: 18px; height: 18px; accent-color: var(--kul-text); flex: none; }
.kul-check--oben input { margin-top: 2px; }

/* Bestellübersicht in der Kasse */
.kul-bestellzeile {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--kul-linie-header);
  font-size: 15px;
}
.kul-bestellzeile__bild { aspect-ratio: var(--kul-produktbild); background: var(--kul-bg-platzhalter); overflow: hidden; }
.kul-bestellzeile__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Konto */
.kul-konto { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 48px 80px; align-items: start; }
.kul-konto__nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--kul-linie-stark);
  position: sticky;
  top: calc(var(--kul-header-h) + 32px);
}
.kul-konto__nav a, .kul-konto__nav button {
  all: unset;
  cursor: pointer;
  padding: 16px 0;
  border-bottom: 1px solid var(--kul-linie-stark);
  font-size: 17px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.kul-konto__nav [aria-current="page"] { font-weight: 600; }
.kul-konto__abmelden { border-bottom: 0 !important; color: var(--kul-text-muted); }

.kul-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kul-kachel { background: var(--kul-bg-weiss); padding: 28px; }
.kul-kachel__wert { font-size: 24px; font-weight: 500; margin-top: 10px; }
.kul-kachel__text { font-size: 17px; margin-top: 10px; line-height: 1.5; }
.kul-kachel--neu {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  border: 1px dashed var(--kul-linie-swatch);
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 500;
  min-height: 180px;
}

.kul-bestellliste { border-top: 1px solid var(--kul-linie-stark); }
.kul-bestellliste__zeile {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--kul-linie-stark);
}
.kul-status { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.kul-status__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--kul-text-muted); flex: none; }
.kul-status--offen .kul-status__punkt { background: var(--kul-hinweis); }
.kul-status--unterwegs .kul-status__punkt { background: var(--kul-ok); }

/* --------------------------------------------------------------------------
   14. Journal, Story, About, Rechtliches
   -------------------------------------------------------------------------- */

/* Zweigeteilte Bildbuehne (Startseite). */
.kul-buehnen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kul-buehne { position: relative; min-height: 540px; overflow: hidden; }
.kul-buehne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kul-buehne__verlauf {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 60%);
}
.kul-buehne__text {
  position: absolute;
  left: 48px; right: 48px; bottom: 40px;
  color: var(--kul-text-invers);
  pointer-events: none;
}
.kul-buehne--bahn .kul-buehne__text { left: max(var(--kul-rand), calc((100vw - var(--kul-inhalt)) / 2)); }
.kul-buehne__titel { font-size: clamp(32px, 3.9vw, 52px); font-weight: 500; letter-spacing: -.03em; line-height: 1.04; }
.kul-buehne__cta { pointer-events: auto; margin-top: 26px; }

/* Story-Karten */
.kul-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 14px; }
.kul-story { display: flex; flex-direction: column; }
.kul-story__bild { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: var(--kul-bg-platzhalter); }
.kul-story__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kul-story__meta { padding: 18px 8px 0 0; }
.kul-story__tag { font-size: 12px; letter-spacing: .08em; color: var(--kul-text-muted); }
.kul-story__titel { font-size: 24px; font-weight: 500; letter-spacing: -.015em; line-height: 1.18; margin-top: 8px; text-wrap: pretty; }
.kul-story__mehr { font-size: 16px; font-weight: 600; margin-top: 16px; display: flex; gap: 10px; }

/* Fliesstext in Story / Rechtstexten */
.kul-prosa { max-width: 760px; font-size: 17px; line-height: 1.65; color: var(--kul-text-weich); }
.kul-prosa > * + * { margin-top: 18px; }
.kul-prosa :where(h2) { margin-top: 48px; }
.kul-prosa :where(h3) { margin-top: 32px; font-size: 20px; font-weight: 600; }
.kul-prosa ul, .kul-prosa ol { padding-left: 20px; }
.kul-prosa li + li { margin-top: 6px; }
.kul-prosa a { text-decoration: underline; text-underline-offset: 3px; }

/* Rechtliches: Seitennavigation */
.kul-recht { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 48px 80px; align-items: start; }
.kul-recht__nav {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--kul-linie-stark);
  position: sticky; top: calc(var(--kul-header-h) + 32px);
}
.kul-recht__nav a {
  padding: 14px 0;
  border-bottom: 1px solid var(--kul-linie-stark);
  font-size: 16px;
}
.kul-recht__nav [aria-current="page"] { font-weight: 600; }

/* Zweispalter Bild + Text */
.kul-medien {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 64px;
  align-items: center;
}
.kul-medien__bild { aspect-ratio: var(--kul-produktbild); background: var(--kul-bg-platzhalter); overflow: hidden; width: 100%; }
.kul-medien__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Zwei Spalten Text (Startseite oben, About) */
.kul-zweispalt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 80px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   15. Responsive
   Grundhaltung ist fluid (clamp, Abschnitt 2). Media Queries stehen nur dort,
   wo sich das VERHALTEN aendert — Spaltenzahl, Header-Stufen, Umstapeln.
   Spaltenzahlen sind ueberall explizit: auto-fit erzeugt sonst 5+1- und
   4+2-Umbrueche, die Kunden sofort sehen (Leitfaden 9.5).
   -------------------------------------------------------------------------- */

/* --- Stufe 1: ab hier wird aus zwei Spalten eine ------------------------- */
@media (max-width: 1100px) {
  .kul-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kul-split, .kul-split--kasse { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .kul-aside { position: static; }
  .kul-pdp { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .kul-pdp__spalte { position: static; max-width: none; }
  .kul-konto, .kul-recht { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .kul-konto__nav, .kul-recht__nav { position: static; }
  .kul-medien, .kul-zweispalt { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .kul-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kul-usp__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
}

/* --- Stufe 2: Header wird kompakter, Buehnen stapeln -------------------- */
@media (max-width: 960px) {
  .kul-header__nav { gap: 26px; font-size: 17px; }
  .kul-header__aktionen { gap: 22px; }
  .kul-buehnen { grid-template-columns: minmax(0, 1fr); }
  .kul-buehne { min-height: 420px; }
  .kul-buehne__text { left: var(--kul-rand); right: var(--kul-rand); }
  .kul-buehne--bahn .kul-buehne__text { left: var(--kul-rand); }
  .kul-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kul-bestellliste__zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Stufe 3: Navigation klappt weg, Burger erscheint ------------------- */
@media (max-width: 820px) {
  /* Gleich breite Außenspalten, sonst sitzt das Logo nicht in der Mitte des
     Bildschirms, sondern in der Mitte zwischen Burger und Symbolen — und die
     sind unterschiedlich breit. */
  .kul-header__inner { grid-template-columns: 1fr auto 1fr; }
  .kul-header__nav { display: none; }
  .kul-header__burger {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-self: start;
    color: var(--kul-text);
  }
  .kul-header__burger svg { width: 26px; height: 26px; display: block; }
  .kul-header__logo { justify-self: center; }

  /* --- Mobiles Menue: ueber die ganze Seite, volle Hoehe ----------------
     Es beginnt unter dem Kopf und reicht bis zum unteren Rand. Oben die
     Navigation, unten Suche, Konto und Sprachwahl — dort ist der Daumen. */
  .kul-header__mobil {
    position: fixed;
    top: var(--kul-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--kul-bg-weiss);
    border-top: 1px solid var(--kul-linie-header);
    overflow-y: auto;
    /* iOS blendet die Browserleiste beim Scrollen ein und aus; 100vh waere
       dort zu hoch. dvh folgt der tatsaechlich sichtbaren Hoehe. */
    max-height: calc(100dvh - var(--kul-header-h));
    -webkit-overflow-scrolling: touch;
  }
  .kul-header[data-offen="true"] .kul-header__mobil { display: block; }

  .kul-header__mobil-inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 8px var(--kul-rand) calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .kul-header__mobil-nav a {
    display: block;
    padding: 16px 0;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.02em;
    border-bottom: 1px solid var(--kul-linie-header);
  }
  .kul-header__mobil-nav a:last-child { border-bottom: 0; }

  /* Die untere Gruppe sitzt am Fuss des Menues. */
  .kul-header__mobil-fuss {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 20px;
    border-top: 1px solid var(--kul-linie-header);
  }

  .kul-page .kul-header__mobil-zeile {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--kul-text);
  }
  .kul-header__mobil-zeile svg { width: 22px; height: 22px; flex: none; }

  .kul-header__mobil-sprachen { padding: 14px 0 0; }
  .kul-header__mobil-sprachen .kul-sprachen { gap: 10px; font-size: 17px; font-weight: 500; }
  .kul-header__mobil-sprachen .kul-sprachen__trenner { color: var(--kul-text-muted); opacity: 1; }
  .kul-page .kul-header__mobil-sprachen .kul-sprachen__aktiv { color: var(--kul-text); }
  .kul-page .kul-header__mobil-sprachen .kul-sprachen a { color: var(--kul-text-muted); text-decoration: none; }

  /* Suche und Konto stehen im Menue — oben rechts bleibt Platz fuer den
     Warenkorb, und das Logo sitzt mittig. */
  .kul-header__aktion--konto { display: none; }
  .kul-header__aktionen > [data-kul-suche] { display: none; }

  .kul-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .kul-groessen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kul-feldpaar { grid-template-columns: minmax(0, 1fr); }
  .kul-aside { padding: 24px; }
}

/* --- Stufe 4: Text ueber Bild statt auf Bild (Leitfaden 9.6) ------------
   Unterhalb dieser Breite liegt die Textspalte sonst mitten im Motiv und der
   Kontrast reisst unter 4,5:1. Genau zwei Zustaende, keine Zwischenstufen:
   der diagonale Verlauf wird flaechig. */
@media (max-width: 760px) {
  .kul-hero__verlauf {
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.62) 100%);
  }
  .kul-hero__text { left: var(--kul-rand); right: var(--kul-rand); }
  .kul-buehne__verlauf {
    background: linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 70%, rgba(0,0,0,0) 100%);
  }
}

/* --- Stufe 5: Schmalste Ansicht ----------------------------------------- */
@media (max-width: 560px) {
  :root { --kul-header-h: 76px; }
  .kul-header__logo svg { width: 52px; height: 52px; }
  .kul-header__aktionen { gap: 18px; }
  .kul-header__aktion svg { width: 24px; height: 24px; }

  .kul-stories { grid-template-columns: minmax(0, 1fr); }
  .kul-kacheln { grid-template-columns: minmax(0, 1fr); }
  .kul-usp__raster { grid-template-columns: minmax(0, 1fr); }
  .kul-groessen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kul-def { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kul-bestellliste__zeile { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .kul-wk__zeile { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
  .kul-wk__summe { grid-column: 2; text-align: left; margin-top: 12px; }

  .kul-footer__claim { font-size: 24px; }
  .kul-footer__wortmarke { font-size: 36px; }
  .kul-aside { padding: 20px; }

  .kul-karte__meta { padding-inline: 0; }
  .kul-farben { padding-inline: 0; }
}

/* --- Produktkarten nie einspaltig: eine Spalte wirkt wie ein Fehler ----- */
@media (max-width: 400px) {
  .kul-raster { gap: 24px 10px; }
  .kul-karte__link { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   16. Bewegung
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .kul-page *,
  .kul-page *::before,
  .kul-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   17. Druck
   -------------------------------------------------------------------------- */

@media print {
  .kul-header, .kul-footer, .kul-filterleiste { display: none !important; }
  .kul-page { background: #fff; }
}

/* --------------------------------------------------------------------------
   18. Platzhalter fuer noch nicht gelieferte Assets
   Fehlende Bilder bleiben sichtbar fehlend (Leitfaden 13) — ein gestrichelter
   Rahmen sagt dem Kunden, was er noch liefern muss. Nichts wird erfunden.
   -------------------------------------------------------------------------- */

.kul-platzhalter {
  width: 100%;
  height: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  background: var(--kul-bg-platzhalter);
  border: 1px dashed var(--kul-linie-swatch);
  color: var(--kul-text-muted);
  font-size: 14px;
  line-height: 1.4;
}
.kul-platzhalter span { max-width: 28ch; }

/* Auf dunklen Buehnen (Hero) muss der Platzhalter lesbar bleiben. */
.kul-hero .kul-platzhalter,
.kul-buehne .kul-platzhalter {
  background: var(--kul-bg-hero);
  border-color: rgba(255,255,255,.35);
  color: rgba(255,255,255,.75);
}

/* --------------------------------------------------------------------------
   19. Sektionsabstände
   Werte 1:1 aus der Design-Referenz. Nach oben fluid gedeckelt, damit auf
   schmalen Geräten kein Leerlauf entsteht.
   -------------------------------------------------------------------------- */

/* Ein Element, das DIREKT in einer Bricks-Section sitzt (ohne .kul-inner),
   schrumpft sonst auf Inhaltsbreite: Section ist eine Flex-Spalte mit
   align-items:center (Leitfaden 4.1). Das traf die Bühnen. */
.kul-page .brxe-section > .kul-buehnen,
.kul-page .brxe-section > .kul-hero,
.kul-page .brxe-section > .kul-sek,
.kul-page .brxe-section > .kul-raster,
.kul-page .brxe-section > .kul-usp,
.kul-page .brxe-section > .kul-filterleiste { width: 100%; }

/* Startseite */
.kul-sec--intro      { padding-block: clamp(48px, 6.7vw, 96px) clamp(40px, 5vw, 72px); }
.kul-sec--produkte   { padding-block: 0 clamp(40px, 5vw, 72px); }
.kul-sec--buehnen    { padding-block: 0; }
.kul-sec--stories    { padding-block: clamp(40px, 3.9vw, 56px) clamp(16px, 1.7vw, 24px); }
.kul-sec--newsletter { padding-block: clamp(40px, 3.6vw, 52px); }

/* Unterseiten */
.kul-sec--kopf       { padding-block: clamp(24px, 2.8vw, 40px) 0; }
.kul-sec--inhalt     { padding-block: clamp(28px, 2.8vw, 40px) clamp(48px, 6.7vw, 96px); }
.kul-sec--schmal     { padding-block: clamp(48px, 6.7vw, 96px) clamp(56px, 8.3vw, 120px); }
.kul-sec--hinweis    { padding-block: 0 clamp(48px, 5.6vw, 80px); }
.kul-sec--usp        { margin-bottom: clamp(48px, 6.7vw, 96px); }

/* Abstand zwischen Filterleiste und Seitenkopf (Design: 32px). */
.kul-sec--filter     { margin-top: clamp(20px, 2.2vw, 32px); }

/* --------------------------------------------------------------------------
   20. Feinheiten aus der Design-Referenz
   -------------------------------------------------------------------------- */

/* Intro: die Textspalte sitzt 10px tiefer als die Überschrift. */
.kul-intro__text { padding-top: 10px; }
.kul-intro__text .kul-mehr { margin-top: 22px; }
.kul-intro__text .kul-lead + .kul-lead { margin-top: 14px; }

/* Newsletter-Sektion: Überschrift links, Formular rechtsbündig. */
.kul-newsletter-sek { align-items: center; gap: 32px 60px; }
.kul-newsletter-sek__formular { justify-self: end; width: 100%; max-width: 400px; }
@media (max-width: 1100px) {
  .kul-newsletter-sek__formular { justify-self: start; }
}

/* USP-Block auf der Produktseite steht auf weißem Grund. */
.kul-usp { width: 100%; }
.kul-usp > .kul-inner { padding-block: clamp(48px, 6.7vw, 96px); }

/* --------------------------------------------------------------------------
   21. Shop-Archiv
   -------------------------------------------------------------------------- */

.kul-shop-kopf__zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-top: 28px;
}
.kul-shop-kopf__anzahl { font-size: 16px; color: var(--kul-text-muted); }

.kul-blaettern {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 48px;
  font-size: 16px;
  font-weight: 500;
}
.kul-page .kul-blaettern :where(a, span) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--kul-linie-stark);
  border-radius: 4px;
  background: var(--kul-bg-weiss);
}
.kul-page .kul-blaettern .current {
  background: var(--kul-text);
  color: var(--kul-text-invers);
  border-color: var(--kul-text);
}

.kul-preishinweis {
  margin: clamp(32px, 4vw, 56px) 0 0;
  font-size: 14px;
  color: var(--kul-text-muted);
  line-height: 1.6;
}
.kul-page .kul-preishinweis a { text-decoration: underline; text-underline-offset: 3px; }

/* Absende-Knopf der Sortierung nur zeigen, wenn JavaScript fehlt. */
.kul-js .kul-nur-ohne-js { display: none; }

/* --------------------------------------------------------------------------
   22. Produktseite — Varianten, Kaufzeile, USP
   -------------------------------------------------------------------------- */

.kul-sec--pdp { padding-block: clamp(20px, 1.7vw, 24px) clamp(56px, 6.7vw, 96px); }

.kul-pdp__steuer { margin-top: 4px; }
.kul-page .kul-pdp__steuer a { text-decoration: underline; text-underline-offset: 3px; }
.kul-pdp__kurz { margin-top: 22px; }
.kul-pdp__kurz p { margin: 0; }
.kul-pdp__kaufen { margin-top: 28px; }

/* Preis: WooCommerce rendert hier eine eigene Struktur. */
.kul-pdp__preis .woocommerce-Price-amount { white-space: nowrap; }
.kul-pdp__preis del { color: #777; font-weight: 400; margin-right: 8px; }
.kul-pdp__preis ins { text-decoration: none; }

/* Das echte <select> bleibt im DOM (WooCommerce braucht es), tritt aber
   optisch zurueck. Ohne JavaScript ist es die einzige Bedienung — deshalb
   kein display:none, sondern Sichtbarkeit erst per JS wegnehmen. */
.kul-wahl__select { margin-bottom: 12px; }
.kul-js .kul-wahl__select {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Umgekehrt: die Knopfreihen sind ohne JavaScript wirkungslos. */
.kul-wahl [data-kul-knoepfe] { display: none; }
.kul-js .kul-wahl [data-kul-knoepfe] { display: flex; }
.kul-js .kul-wahl .kul-groessen { display: grid; }

.kul-wahl__titel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kul-wahl__titel label { font-size: 15px; font-weight: 600; }
.kul-page .kul-wahl__tabelle { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

.kul-farben--gross { gap: 12px; padding: 0; }
.kul-swatch[disabled] { opacity: .3; cursor: not-allowed; }

.kul-variante { margin-top: 24px; }

/* Die Design-Vorlage zeigt auf der Produktseite keine Mengenwahl. Sie steht
   trotzdem da — ohne sie muss man für ein zweites Stück den Umweg über den
   Warenkorb gehen. Sie sitzt in einer Zeile mit dem Kaufen-Button. */
.kul-kaufzeile {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}
.kul-kaufzeile .kul-menge { height: 58px; align-self: stretch; }
.kul-kaufzeile .kul-menge__knopf { width: 42px; }
.kul-page .kul-kaufzeile .kul-btn--dunkel { height: 58px; width: 100%; }

@media (max-width: 420px) {
  .kul-kaufzeile { grid-template-columns: minmax(0, 1fr); }
  .kul-kaufzeile .kul-menge { width: 100%; justify-content: space-between; }
}

/* WooCommerce-Meldungen in der Variantenauswahl. */
.kul-page .woocommerce-variation-description { font-size: 15px; line-height: 1.6; }
.kul-page .woocommerce-variation-price { font-size: 22px; font-weight: 500; margin-bottom: 4px; }
.kul-page .woocommerce-variation-availability { margin-bottom: 4px; }
.kul-page .kul-zuruecksetzen {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kul-page .reset_variations { visibility: visible; }

.kul-usp__text { min-width: 0; }
.kul-usp__text-p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--kul-text-grau); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   23. WooCommerce-Meldungen im kulston-Stil
   -------------------------------------------------------------------------- */

/* WooCommerce faerbt Meldungen und die Links darin in sein eigenes Gruen
   (#11b76b) — bei "Rueckgaengig machen?" steht gruener Text auf gruenem
   Knopf und ist unlesbar. Hier wird beides zurueckgeholt: Text in der
   Schriftfarbe, die Bedeutung traegt allein die Linie links. */

.kul-page :where(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner) {
  list-style: none;
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--kul-bg-weiss);
  border-left: 3px solid var(--kul-text);
  color: var(--kul-text);
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

/* WooCommerce setzt den Fokus per Skript auf die Meldung, damit
   Screenreader sie vorlesen. Der Browser malt dafuer seinen Fokusring —
   im Design ein blauer Kasten um die Meldung. Fuer diesen gesetzten Fokus
   wird er entfernt, fuer echte Tastaturnutzung bleibt er. */
.kul-page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):focus:not(:focus-visible) {
  outline: none;
}
.kul-page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):focus-visible {
  outline: 2px solid var(--kul-text);
  outline-offset: 2px;
}

.kul-page .woocommerce-message { border-left-color: var(--kul-ok); }
.kul-page .woocommerce-info    { border-left-color: var(--kul-text); }
.kul-page .woocommerce-error   { border-left-color: var(--kul-fehler); color: var(--kul-fehler); }

/* Mehrere Fehler kommen als Liste; die Punkte stapeln statt nebeneinander. */
.kul-page .woocommerce-error { display: block; }
.kul-page .woocommerce-error li { margin: 0; }
.kul-page .woocommerce-error li + li { margin-top: 6px; }

/* Die Kasse verlinkt jede Fehlerzeile auf ihr Feld. Als Link formatiert
   waere der ganze Satz unterstrichen — das liest sich schlechter, nicht
   besser. Der Sprung bleibt, die Zeile sieht aus wie Text. */
.kul-page .woocommerce-error a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  margin-left: 0;
}
.kul-page .woocommerce-error a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Links in Meldungen sind Links, keine Knoepfe. WooCommerce und Bricks
   geben ihnen sonst Hintergrund und Polsterung. */
.kul-page :is(.woocommerce-message, .woocommerce-info) :is(a, a.button, a.restore-item, .button) {
  order: 2;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 0;
}
.kul-page :is(.woocommerce-message, .woocommerce-info) :is(a, .button):hover {
  background: none;
  text-decoration-thickness: 2px;
}

/* WooCommerce faerbt das Label eines fehlerhaften Felds pink (#fa4362).
   Das gehoert nicht zur Palette — es wird die Fehlerfarbe des Designs. */
.kul-page .woocommerce-invalid label,
.kul-page .woocommerce-invalid .kul-feld__label {
  color: var(--kul-fehler);
}

/* Schmale Geraete: der Link rutscht unter den Text statt rechts zu kleben. */
@media (max-width: 600px) {
  .kul-page :is(.woocommerce-message, .woocommerce-info) :is(a, .button) { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   24. Bildflächen
   -------------------------------------------------------------------------- */

.kul-pdp__bild,
.kul-medien__bild { position: relative; }


.kul-hero__bild img,
.kul-buehne img { width: 100%; height: 100%; object-fit: cover; }

/* Produktfotos werden NIE beschnitten: die Box hat ihr Seitenverhaeltnis,
   contain garantiert den Rest. Bei passendem Verhaeltnis entsteht dabei kein
   sichtbarer Rand — nur Fotos mit abweichendem Format bekommen einen
   haarfeinen Streifen statt eines Beschnitts. */
.kul-karte__bild img,
.kul-pdp__bild img,
.kul-medien__bild img,
.kul-wk__bild img,
.kul-bestellzeile__bild img { width: 100%; height: 100%; object-fit: contain; }

/* Bildfläche der Produktkarte ist ein Link — Darstellung bleibt wie gehabt. */
.kul-page a.kul-karte__bild { display: block; color: inherit; }
.kul-karte__bild img { transition: transform .4s ease; }
.kul-page a.kul-karte__bild:hover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .kul-page a.kul-karte__bild:hover img { transform: none; }
}
/* Der Produktname bekommt beim Überfahren eine Unterstreichung — sonst sieht
   man der Karte nicht an, dass sie klickbar ist. */
.kul-page .kul-karte__link:hover .kul-karte__name { text-decoration: underline; text-underline-offset: 3px; }

/* Zweites Produktbild beim Überfahren der Kachel.
   Das Hover-Bild liegt deckungsgleich darüber und wird eingeblendet — kein
   Austausch des src, damit nichts flackert und beide Bilder vorgeladen sind. */
.kul-karte__hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.kul-page .kul-karte__bild--wechsel:hover .kul-karte__hover,
.kul-page .kul-karte__bild--wechsel:focus-visible .kul-karte__hover { opacity: 1; }
/* Beim Wechsel darf das Grundbild nicht zusätzlich zoomen — sonst sieht man
   zwei Bewegungen gleichzeitig. */
.kul-page .kul-karte__bild--wechsel:hover img { transform: none; }

@media (hover: none) {
  .kul-karte__hover { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kul-karte__hover { transition: none; }
}

/* --------------------------------------------------------------------------
   25. Warenkorb
   -------------------------------------------------------------------------- */

.kul-woo { width: 100%; }

.kul-split--warenkorb { align-items: start; }

.kul-wk__text { min-width: 0; }
.kul-page .kul-wk__name { font-size: 19px; font-weight: 500; display: inline-block; }
.kul-page .kul-wk__name:hover { text-decoration: underline; text-underline-offset: 3px; }

.kul-wk__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding-top: 28px;
}
.kul-page .kul-mehr--zurueck { font-size: 17px; margin-right: auto; }

.kul-gutschein { display: flex; gap: 8px; flex-wrap: wrap; }
.kul-page .kul-gutschein .kul-input { width: 200px; height: 40px; font-size: 15px; }

.kul-aside__titel { margin-bottom: 6px; }
.kul-aside__cta { margin-top: 12px; }
.kul-aside__hinweis { font-size: 14px; color: var(--kul-text-grau); line-height: 1.6; }
.kul-page .kul-aside__hinweis a { text-decoration: underline; text-underline-offset: 3px; }

/* Fortschritt zum versandkostenfreien Einkauf */
.kul-versandfrei { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.kul-versandfrei__text { font-size: 15px; }

.kul-aside__zeile--versand { align-items: baseline; }
.kul-versandwahl { display: flex; flex-direction: column; gap: 8px; text-align: right; }
.kul-versandwahl__option { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; }
.kul-versandwahl__option input { width: 16px; height: 16px; accent-color: var(--kul-text); flex: none; }

/* Leerer Warenkorb */
.kul-wk-leer {
  border-top: 1px solid var(--kul-linie-stark);
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(40px, 5.5vw, 64px) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.kul-wk-leer__text { margin: 0; font-size: 22px; }
.kul-wk-leer__cta { width: 280px; max-width: 100%; }

/* WooCommerce legt um den Shortcode eine eigene Hülle — sie darf das Raster
   nicht einschnüren. */
.kul-page .woocommerce { width: 100%; }
.kul-page .woocommerce-cart-form { min-width: 0; }

@media (max-width: 1100px) {
  .kul-split--warenkorb .kul-aside { position: static; }
}

/* --------------------------------------------------------------------------
   26. Produktgalerie mobil: Slider statt Stapel
   Untereinander gestapelt wäre die Galerie auf dem Telefon meterlang. Der
   Slider ist reines CSS — Scroll-Snap statt JavaScript.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  /* Im Slider-Modus gibt es keinen Nachlauf — die Infospalte klebt dort nicht. */
  .kul-pdp__galeriebereich { padding-bottom: 0 !important; }

  .kul-pdp__galerie {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Kein Herausziehen über die Seitenränder: die Galerie ist ein
       Raster-Element, dessen Spur die Breite vorgibt — negative Ränder
       würden sie nicht verbreitern, nur den Platz fürs Bild verkleinern. */
    padding-bottom: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }
  .kul-pdp__galerie::-webkit-scrollbar { display: none; }

  .kul-pdp__bild {
    flex: 0 0 auto;
    /* So groß wie möglich: ein Bild je Ansicht, volle Breite. Dass es
       weitergeht, zeigen die Ziffern darunter. */
    width: 100%;
    scroll-snap-align: center;
  }

  /* Ein einzelnes Bild braucht keinen Slider. */
  .kul-pdp__galerie:has(.kul-pdp__bild:only-child) { overflow-x: visible; }
}

/* Ziffernleiste unter dem Hauptbild — bewusst zurückhaltend. */
.kul-galerie-ziffern {
  display: none;
  justify-content: center;
  gap: 14px;
  padding-top: 14px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
  .kul-galerie-ziffern { display: flex; }
}
.kul-pdp__galeriebereich { min-width: 0; }
.kul-page .kul-galerie-ziffer {
  all: unset;
  cursor: pointer;
  min-width: 18px;
  padding: 4px 2px;
  text-align: center;
  color: var(--kul-text-muted);
  opacity: .55;
  transition: opacity .2s ease, color .2s ease;
}
.kul-page .kul-galerie-ziffer[aria-current="true"] {
  color: var(--kul-text);
  opacity: 1;
  font-weight: 600;
}
.kul-page .kul-galerie-ziffer:focus-visible { outline: 2px solid var(--kul-text); outline-offset: 2px; }

/* Die Zusammenfassung füllt ihre Rasterspalte. Bricks' WooCommerce-Styles
   geben <aside class="cart-collaterals"> sonst eine eigene Breite mit und
   die Spalte bleibt halb leer. */
.kul-page .kul-aside { width: 100%; box-sizing: border-box; }
.kul-page .kul-aside.cart-collaterals { float: none; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   27. Kasse
   -------------------------------------------------------------------------- */

/* WooCommerce haengt Fehlermeldungen beim Absenden per JavaScript IN das
   Formular — und das Formular ist das zweispaltige Raster. Die Meldung wird
   damit zum ersten Rasterfeld und schiebt die Eingabefelder in die zweite
   Spalte: die Kasse verzieht sich. Sie muss ueber beide Spalten laufen. */
.kul-page form.checkout > .woocommerce-NoticeGroup,
.kul-page form.checkout > .woocommerce-error,
.kul-page form.checkout > .woocommerce-message,
.kul-page form.checkout > .woocommerce-info {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

/* Die Meldung muss auffallen — sie ist der Grund, warum nichts weitergeht. */
.kul-page form.checkout > .woocommerce-NoticeGroup .woocommerce-error {
  margin: 0;
  scroll-margin-top: calc(var(--kul-header-h) + 24px);
}

.kul-kasse__schritte { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); min-width: 0; }
.kul-schritt__titel { display: flex; gap: 14px; align-items: baseline; }
.kul-schritt__konto, .kul-schritt__zusatz { margin-top: 18px; }

/* WooCommerce rendert Felder als <p class="form-row"> — die Optik kommt aus
   unseren Klassen, nicht aus dem Plugin-Stylesheet (das ist abgemeldet). */
.kul-page .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  min-width: 0;
}
.kul-page .form-row label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.kul-page .form-row .required { color: var(--kul-fehler); text-decoration: none; }
.kul-page .form-row .optional { color: var(--kul-text-muted); font-weight: 400; }

.kul-page :where(.form-row input.input-text, .form-row textarea, .form-row select, .form-row .kul-input, .form-row .kul-select) {
  height: 52px;
  width: 100%;
  padding: 0 16px;
  font: inherit;
  font-size: 16px;
  line-height: normal;
  border: 1px solid var(--kul-linie-input);
  border-radius: 4px;
  background: var(--kul-bg-weiss);
  color: var(--kul-text);
  box-sizing: border-box;
}
.kul-page .form-row textarea { height: auto; min-height: 110px; padding: 14px 16px; }

/* select2 nutzt WooCommerce fürs Länderfeld. */
.kul-page .select2-container--default .select2-selection--single {
  height: 52px;
  border: 1px solid var(--kul-linie-input);
  border-radius: 4px;
  background: var(--kul-bg-weiss);
}
.kul-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 50px;
  padding-left: 16px;
  color: var(--kul-text);
  font-size: 16px;
}
.kul-page .select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px; right: 10px; }
.kul-page .select2-dropdown { border-color: var(--kul-linie-input); border-radius: 4px; }
.kul-page .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--kul-text); }

/* Adressraster: zwei Spalten, einzelne Felder über die volle Breite. */
.kul-adresse .kul-feldpaar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kul-page .kul-feld--voll { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .kul-adresse .kul-feldpaar { grid-template-columns: minmax(0, 1fr); }
}

/* Auswahlkacheln (Versand, Zahlung) */
.kul-optionen { display: flex; flex-direction: column; gap: 10px; }
.kul-page .kul-option { cursor: pointer; }
/* Das echte Eingabefeld bleibt bedienbar, tritt aber optisch zurück —
   der gezeichnete Punkt daneben zeigt den Zustand. */
.kul-option__echt {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.kul-page .kul-option:has(.kul-option__echt:checked) { border-color: var(--kul-text); }
.kul-page .kul-option:has(.kul-option__echt:checked) .kul-option__radio::after { background: var(--kul-text); }
.kul-page .kul-option:has(.kul-option__echt:focus-visible) { outline: 2px solid var(--kul-text); outline-offset: 2px; }
.kul-page .kul-option:hover { border-color: var(--kul-linie-swatch); }

.kul-option__symbole { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.kul-option__symbole img { max-height: 22px; width: auto; }
.kul-option__inhalt {
  padding: 14px 18px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kul-text-grau);
}
.kul-option__inhalt p { margin: 0 0 8px; }

.kul-zahlung__abschluss { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.kul-page .kul-zahlung__abschluss .kul-btn--dunkel { width: 100%; }

/* Bestellübersicht an der Kasse */
.kul-bestellung { display: flex; flex-direction: column; gap: 14px; }
.kul-bestellzeile__text { min-width: 0; }
.kul-bestellzeile__name { font-weight: 500; }
.kul-bestellzeile__detail { color: var(--kul-text-muted); margin-top: 2px; }
.kul-bestellzeile__summe { font-size: 15px; font-weight: 500; white-space: nowrap; }

/* Pflichthinweise und AGB-Haken */
.kul-page .woocommerce-terms-and-conditions-wrapper { font-size: 15px; line-height: 1.5; }
.kul-page .woocommerce-privacy-policy-text p { margin: 0 0 12px; font-size: 14px; color: var(--kul-text-grau); line-height: 1.6; }
.kul-page .validate-required.woocommerce-invalid input.input-text,
.kul-page .validate-required.woocommerce-invalid select { border-color: var(--kul-fehler); }

@media (max-width: 1100px) {
  .kul-split--kasse .kul-aside { position: static; }
}

/* --------------------------------------------------------------------------
   28. Bestellbestätigung
   -------------------------------------------------------------------------- */

.kul-danke { max-width: 900px; }
.kul-danke__titel { margin-top: 14px; }
.kul-danke__text { margin-top: 24px; }

.kul-danke__wege {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.kul-danke__cta { width: 280px; max-width: 100%; }
/* Steht der Knopf direkt unter einem Satz, braucht er Luft — die Absaetze
   unter .kul-page haben margin:0 aus dem Reset. */
.kul-page p + .kul-danke__cta { margin-top: 24px; }

/* Zweiter Weg: nur Umriss, damit die Hierarchie stimmt. */
.kul-page .kul-btn--umriss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 58px;
  padding: 0 24px;
  border: 1px solid var(--kul-text);
  background: transparent;
  color: var(--kul-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  transform: none;
}
.kul-page .kul-btn--umriss:hover { background: var(--kul-text); color: var(--kul-text-invers); transform: none; }

/* Zahlungsanweisungen (z. B. Bankverbindung bei Vorkasse) */
.kul-page .woocommerce-bacs-bank-details {
  margin-top: 32px;
  padding: 24px 28px;
  background: var(--kul-bg-weiss);
  font-size: 16px;
  line-height: 1.6;
}
.kul-page .woocommerce-bacs-bank-details h2,
.kul-page .wc-bacs-bank-details-heading {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 500;
}
.kul-page .wc-bacs-bank-details { list-style: none; margin: 0; padding: 0; }
.kul-page .wc-bacs-bank-details li { padding: 4px 0; }

/* --------------------------------------------------------------------------
   29. Mein Konto
   -------------------------------------------------------------------------- */

/* WooCommerce legt um Navigation und Inhalt eine eigene Hülle.
   NUR mit Navigation darin, also im angemeldeten Zustand: ausgeloggt steht
   dort das Anmeldeformular und landete sonst in der schmalen Navispalte —
   90px breit, unlesbar. */
.kul-woo--konto > .woocommerce:has(.kul-konto__nav) {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 48px 80px;
  align-items: start;
}
@media (max-width: 1100px) {
  .kul-woo--konto > .woocommerce:has(.kul-konto__nav) { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .kul-konto__nav { position: static; }
}

.kul-konto__inhalt { min-width: 0; }
/* Der Abstand unter der Überschrift kam nie an: der globale Reset
   `.kul-page h2 { margin: 0 }` ist spezifischer als eine einzelne Klasse.
   Das -16px am Lead war die Gegenrechnung dazu — und zog den Satz in die
   Überschrift hinein, sobald der Abstand fehlte. Beides jetzt ohne Tricks. */
.kul-page .kul-konto__titel { margin: 0 0 24px; }
.kul-page .kul-konto__titel:has(+ .kul-konto__lead) { margin-bottom: 8px; }
.kul-page .kul-konto__lead { margin: 0 0 28px; }

.kul-kachel__link { margin-top: 18px; font-size: 16px; }
.kul-kachel__aktionen { margin-top: 18px; display: flex; gap: 20px; font-size: 15px; }
.kul-page .kul-kachel__aktionen a { text-decoration: underline; text-underline-offset: 3px; }
.kul-kacheln--adressen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .kul-kacheln--adressen { grid-template-columns: minmax(0, 1fr); } }

.kul-bestellliste__nr { font-size: 17px; font-weight: 600; }
.kul-bestellliste__summe { font-size: 17px; font-weight: 500; }
.kul-bestellliste__aktionen { display: flex; flex-direction: column; gap: 6px; font-size: 15px; align-items: flex-start; }
.kul-page .kul-bestellliste__aktionen a { text-decoration: underline; text-underline-offset: 3px; }

.kul-konto__formular { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.kul-konto__formular .kul-feldpaar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .kul-konto__formular .kul-feldpaar { grid-template-columns: minmax(0, 1fr); } }

.kul-konto__passwort { border: 0; padding: 0; margin: 10px 0 0; }
.kul-konto__legende { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 14px; }
.kul-konto__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 8px; }

/* Knapper Button: nicht volle Breite, wie im Design. */
.kul-page .kul-btn--knapp { width: auto; height: 52px; }
.kul-page .kul-btn--knapp .kul-btn__pfeil { width: 52px; }

/* Anmelden / Registrieren */
.kul-anmeldung { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 980px; }
.kul-anmeldung--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 80px; }
@media (max-width: 860px) { .kul-anmeldung--zwei { grid-template-columns: minmax(0, 1fr); } }
.kul-anmeldung__spalte { min-width: 0; }
.kul-anmeldung__spalte .kul-h2 { margin-bottom: 24px; }

/* Abstand zwischen Brotkrumen und kleiner Überschrift im Seitenkopf. */
.kul-shop-kopf__eyebrow { margin-top: 20px; }
.kul-shop-kopf__lead { margin-top: 20px; max-width: 680px; }

/* Bricks bringt eigene WooCommerce-Styles mit, die hier höher gewichtet sind
   (`.woocommerce-checkout .woocommerce-shipping-fields #ship-to-different-address label`
   setzt display:block und 21px). Deshalb der gleich spezifische Konter. */
.kul-page.woocommerce-checkout .woocommerce-shipping-fields #ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 0;
  color: var(--kul-text);
}
.kul-page.woocommerce-checkout .woocommerce-shipping-fields #ship-to-different-address { margin-top: 4px; }

/* Bricks pinnt das Kästchen absolut an den rechten Rand — in einer Flex-Zeile
   gehört es neben den Text. */
.kul-page.woocommerce-checkout .woocommerce-shipping-fields #ship-to-different-address input {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--kul-text);
}

/* Ebenso bei der Kontoanlage im Rechnungsblock. */
.kul-page .woocommerce-account-fields label.kul-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 0;
}

/* Der Abstand zwischen Rechnungs- und Versandblock kam vorher aus drei
   Quellen übereinander. */
.kul-adresse + .kul-adresse { margin-top: 4px; }
.kul-page .woocommerce-shipping-fields { margin: 0; }
.kul-page .woocommerce-shipping-fields .shipping_address { margin-top: 18px; }

/* --------------------------------------------------------------------------
   30. Shop Direction (Oktober 2026)
   Weniger Text, mehr Luft. Die Haltung steht für sich, nicht als Fließtext
   neben einer Überschrift.
   -------------------------------------------------------------------------- */

.kul-sec--produkte-oben { padding-block: clamp(40px, 5vw, 72px) clamp(40px, 5vw, 72px); }
.kul-sec--haltung       { padding-block: clamp(48px, 6.7vw, 96px); }

/* Haltungsblock: eine große Zeile, ein kurzer Absatz. Nicht zweispaltig
   wie der frühere Intro-Text. */
.kul-sec--haltung .kul-zweispalt {
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px;
  gap: 24px;
}
.kul-sec--haltung .kul-intro__text { padding-top: 0; }
.kul-sec--haltung .kul-h1 { font-size: clamp(40px, 6vw, 76px); letter-spacing: -.035em; line-height: .95; }
.kul-sec--haltung .kul-lead { font-size: clamp(18px, 1.6vw, 21px); max-width: 60ch; }

/* Schlusszeile (der Claim) tritt hervor, ohne laut zu sein. */
.kul-intro__schluss {
  margin-top: 22px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 300;
  letter-spacing: -.015em;
}

/* Produktzeile auf der Produktseite */
.kul-pdp__claim {
  margin-top: 10px;
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 500;
  color: var(--kul-text-weich);
}

/* Sektionskopf mit Einleitung darunter */
.kul-sek__kopf-text { min-width: 0; }
.kul-sek__lead { margin: 8px 0 0; font-size: 17px; color: var(--kul-text-muted); text-wrap: pretty; }
.kul-sek__kopf:has(.kul-sek__lead) { align-items: start; }

.kul-newsletter-sek__text { min-width: 0; }
.kul-newsletter-sek__lead { margin-top: 14px; max-width: 46ch; font-size: 17px; color: var(--kul-text-grau); }

/* --------------------------------------------------------------------------
   31. Punkte-Raster und Abschluss-CTA
   -------------------------------------------------------------------------- */

.kul-punkte { width: 100%; }
.kul-punkte__kopf { margin-bottom: clamp(32px, 4vw, 48px); max-width: 760px; }
.kul-punkte__kopf .kul-eyebrow + .kul-h2 { margin-top: 12px; }

.kul-punkte__raster { display: grid; gap: 36px 60px; }
.kul-punkte__raster[data-spalten="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kul-punkte__raster[data-spalten="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kul-punkte__raster[data-spalten="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .kul-punkte__raster[data-spalten="3"],
  .kul-punkte__raster[data-spalten="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .kul-punkte__raster { grid-template-columns: minmax(0, 1fr) !important; gap: 28px; }
}

.kul-punkte__punkt { border-top: 1px solid var(--kul-text); padding-top: 18px; min-width: 0; }
.kul-punkte__nr { font-size: 14px; color: var(--kul-text-muted); margin-bottom: 10px; }
.kul-punkte__titel { font-size: clamp(20px, 1.9vw, 24px); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
.kul-punkte__text { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--kul-text-grau); text-wrap: pretty; }

/* Abschluss-CTA */
.kul-sec--abschluss { padding-block: clamp(56px, 7vw, 100px) clamp(64px, 8.3vw, 120px); }
.kul-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.kul-cta__titel { margin: 0; }
.kul-sec--about { padding-block: clamp(40px, 5vw, 72px) clamp(48px, 6.7vw, 96px); }
.kul-sec--about .kul-zweispalt { max-width: 820px; }

/* --------------------------------------------------------------------------
   32. Journal und Story
   -------------------------------------------------------------------------- */

.kul-journal { width: 100%; }
.kul-journal__filter { margin-bottom: clamp(32px, 4vw, 48px); }

/* Hervorgehobener Beitrag: Bild links, Text rechts. */
.kul-page .kul-journal__gross {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px 56px;
  align-items: center;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.kul-journal__gross-bild {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--kul-bg-platzhalter);
}
.kul-journal__gross-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.kul-page .kul-journal__gross:hover .kul-journal__gross-bild img { transform: scale(1.02); }
.kul-journal__gross-text { min-width: 0; }
.kul-journal__gross-titel { margin: 12px 0 0; font-size: clamp(28px, 3.2vw, 42px); font-weight: 500; letter-spacing: -.025em; line-height: 1.08; }
.kul-journal__gross-text .kul-lead { margin-top: 16px; max-width: 48ch; }
.kul-journal__gross-text .kul-story__mehr { margin-top: 22px; }

@media (max-width: 900px) {
  .kul-page .kul-journal__gross { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .kul-page .kul-journal__gross:hover .kul-journal__gross-bild img { transform: none; }
}

/* Einzelbeitrag */
.kul-sec--story { padding-block: clamp(24px, 2.8vw, 40px) clamp(48px, 6vw, 80px); }
.kul-story-seite { max-width: 820px; margin-inline: auto; }
.kul-story-seite__meta { margin-top: 24px; }
.kul-story-seite__titel { margin-top: 14px; }
.kul-story-seite__untertitel { margin-top: 20px; }

/* Das Beitragsbild behält sein eigenes Format. Querformat läuft über die
   volle Spaltenbreite, Hochformat wird schmaler gesetzt — sonst füllt ein
   Handyfoto den halben Bildschirm, bevor der Text beginnt. */
.kul-story-seite__bild {
  margin: clamp(32px, 4vw, 48px) 0;
  background: var(--kul-bg-platzhalter);
}
.kul-story-seite__bild img { display: block; width: 100%; height: auto; }

.kul-story-seite__bild[data-format="hoch"] {
  width: min(100%, 560px);
  margin-inline: auto;
}

/* Platzhalter braucht weiter eine Fläche. */
.kul-story-seite__bild .kul-platzhalter { aspect-ratio: 3 / 2; min-height: 0; }

.kul-story-seite__text blockquote {
  margin: 32px 0;
  padding-left: 24px;
  border-left: 2px solid var(--kul-text);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.015em;
}
.kul-story-seite__text blockquote p { margin: 0; }
.kul-story-seite__tags { margin-top: 40px; }

/* --------------------------------------------------------------------------
   33. Rechtsseiten
   -------------------------------------------------------------------------- */

.kul-recht__text { min-width: 0; }
.kul-recht__text .kul-h2 { margin-bottom: 12px; }
.kul-recht__stand { margin-bottom: 28px; }
.kul-recht__formular { margin-top: 40px; max-width: 640px; }

/* Die Rechtstexte bringen Tabellen mit (Versandkosten). */
.kul-page .kul-prosa table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  text-align: left;
  margin-top: 8px;
}
.kul-page .kul-prosa th { padding: 8px 0; font-weight: 500; color: var(--kul-text-muted); border-bottom: 1px solid var(--kul-linie); }
.kul-page .kul-prosa td { padding: 10px 0; border-bottom: 1px solid var(--kul-linie); vertical-align: top; }
.kul-page .kul-prosa td + td, .kul-page .kul-prosa th + th { padding-left: 20px; }

/* Platzhalter in eckigen Klammern sollen auffallen, solange sie dastehen. */
.kul-prosa mark.kul-platzhalter-text {
  background: #fff3d6;
  color: var(--kul-text);
  padding: 1px 4px;
  border-radius: 2px;
}

@media (max-width: 1100px) {
  .kul-recht__nav { position: static; }
  .kul-sec--recht .kul-recht { gap: 32px; }
}

/* In den Rechtstexten sind die Zwischenüberschriften h2 (Hierarchie), sollen
   aber weiter wie Zwischenüberschriften aussehen. */
.kul-recht__text .kul-prosa h2 { margin-top: 32px; font-size: 20px; font-weight: 600; letter-spacing: 0; }
.kul-recht__text .kul-prosa > h2:first-child { margin-top: 0; }

/* Kicker über der Story-Überschrift — ein Ort, ein Thema. */
.kul-story-seite__kicker {
  margin-top: 18px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
}
.kul-story-seite__kicker + .kul-story-seite__titel { margin-top: 10px; }

/* --------------------------------------------------------------------------
   34. Langer Journal-Text
   -------------------------------------------------------------------------- */

/* Zwischenüberschriften im Beitrag. Der Seitentitel ist das H1, deshalb
   steht im Text h3 — optisch bleibt es eine Zwischenüberschrift. */
.kul-story-seite__text h2 {
  margin-top: clamp(40px, 4.5vw, 64px);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
}

/* Die einzeln stehenden Zeilen am Ende sind der Takt des Textes —
   enger gesetzt, damit sie als Block lesbar bleiben. */
.kul-story-seite__text .kul-takt { margin-top: 2px; }
.kul-story-seite__text p + .kul-takt { margin-top: 18px; }
.kul-story-seite__text .kul-takt + p { margin-top: 18px; }

/* Faktenkasten am Ende */
.kul-faktenbox {
  margin-top: clamp(48px, 5.5vw, 72px);
  padding: clamp(24px, 3vw, 36px);
  background: var(--kul-bg-weiss);
}
.kul-story-seite__text .kul-faktenbox h2 {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kul-text-muted);
}
.kul-faktenbox .kul-def {
  grid-template-columns: 150px minmax(0, 1fr);
  padding: 8px 0;
  border-bottom: 1px solid var(--kul-linie);
  font-size: 16px;
  line-height: 1.5;
}
.kul-faktenbox .kul-def:last-child { border-bottom: 0; }
@media (max-width: 560px) {
  .kul-faktenbox .kul-def { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* --------------------------------------------------------------------------
   35. Bilder im Journal-Text
   Ziehen über die Textspalte hinaus, solange Platz ist — der Text bleibt
   lesbar schmal, die Bilder bekommen Luft.
   -------------------------------------------------------------------------- */

.kul-story-seite__text figure {
  margin: clamp(40px, 5vw, 64px) 0;
  width: 100%;
}
.kul-story-seite__text figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--kul-bg-platzhalter);
}
.kul-story-seite__text figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--kul-text-muted);
  text-align: left;
}

/* Querformat darf über die Textspalte hinausragen, Hochformat nicht —
   ein hochkant gesetztes Foto wird über die volle Breite sonst so hoch,
   dass es den Lesefluss unterbricht. */
@media (min-width: 1100px) {
  .kul-story-seite__text figure.kul-breit {
    width: calc(100% + 2 * clamp(0px, 7vw, 160px));
    margin-inline: clamp(0px, -7vw, -160px);
  }
}
.kul-story-seite__text figure.kul-hoch {
  width: min(100%, 560px);
  margin-inline: auto;
}

/* Während der Warenkorb neu gerechnet wird, bleibt er sichtbar, nimmt aber
   keine weiteren Klicks an — sonst klickt man gegen veraltete Zahlen. */
.kul-woo--warenkorb[aria-busy="true"] { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

/* --------------------------------------------------------------------------
   36. Kasse: Bricks-Kästen entfernen, Bestellknopf stabilisieren
   -------------------------------------------------------------------------- */

/* Bricks legt Rahmen um Zahlungsblock und Bestellübersicht und gibt dem
   Zahlungsblock 20px Innenabstand. Beides steht nicht im Design und erzeugt
   einen Kasten im Kasten. */
.kul-page.woocommerce-checkout .woocommerce-checkout-payment,
.kul-page.woocommerce-checkout .woocommerce-checkout-review-order-table {
  border: 0;
}
.kul-page.woocommerce-checkout #payment { padding: 0; background: transparent; }

/* Bestellknopf: der Pfeil steckt in ::after, weil WooCommerce' checkout.js
   die Beschriftung per .text() setzt und dabei alle Kindelemente entfernt.
   Pseudo-Elemente überstehen das. */
.kul-page .kul-btn--bestellen {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  height: 58px;
  padding: 0 0 0 24px;
  text-align: left;
  overflow: hidden;
}
.kul-page .kul-btn--bestellen::after {
  content: "→";
  flex: none;
  align-self: stretch;
  width: 58px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kul-bg-weiss);
  color: var(--kul-text);
  border: 1px solid var(--kul-text);
  font-size: 20px;
  line-height: 1;
}
.kul-page .kul-btn--bestellen:hover { background: #000; }

/* Bricks' Standardknopf (grauer Hintergrund, fette Schrift) greift sonst
   auch bei unseren Knöpfen durch. */
.kul-page .woocommerce .button.kul-btn { font-weight: 600; }

/* Bricks gibt der Beschreibung einer Zahlungsart einen grauen Kasten. Im
   Design gehört sie schlicht unter die gewählte Option. */
.kul-page.woocommerce-checkout #payment .payment_methods .payment_box {
  background-color: transparent;
  margin: 0;
  padding: 12px 18px 2px 46px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kul-text-grau);
}
.kul-page.woocommerce-checkout #payment .payment_methods .payment_box::before { display: none; }

/* Der Einzug von 46px richtet eine Beschreibung am Namen der Zahlungsart aus,
   links neben dem Punkt. Bei Formularfeldern — Mollies Kartenfelder — sieht
   derselbe Einzug schief aus, weil rechts nur 18px stehen. Dort also auf
   beiden Seiten gleich. */
.kul-page.woocommerce-checkout #payment .payment_methods .payment_box:has(.mollie-components) {
  padding: 16px 18px 18px;
}
.kul-page .kul-option-huelle + .kul-option-huelle { margin-top: 10px; }

/* Zustimmung und Datenschutzhinweis bekommen Luft — sie stehen zwischen
   Zahlungsart und dem Knopf, der die Bestellung auslöst. */
.kul-page.woocommerce-checkout .woocommerce-privacy-policy-text { margin: 0; }
.kul-page.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: 0; font-size: 15px; }
.kul-page .woocommerce-terms-and-conditions-checkbox-text { font-size: 15px; line-height: 1.5; }
.kul-page .validate-required.woocommerce-terms-and-conditions-checkbox { margin: 0; }

/* Zustimmung: KEIN Flex-Layout. Hinter dem Text steht ein eigenes
   <span class="required">*</span> — als Flex-Element landet es am rechten
   Rand statt hinter dem Satz. Mit Einzug und absolutem Kästchen fließen
   Text und Sternchen normal weiter. */
.kul-page.woocommerce-checkout .woocommerce-form__label-for-checkbox.checkbox {
  display: block;
  position: relative;
  padding-left: 30px;
  margin: 0;
  cursor: pointer;
  line-height: 1.5;
}
.kul-page.woocommerce-checkout .woocommerce-form__label-for-checkbox.checkbox input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--kul-text);
}
.kul-page.woocommerce-checkout .woocommerce-form__label-for-checkbox.checkbox .required {
  color: var(--kul-fehler);
  text-decoration: none;
}

/* Luft zwischen Zustimmung und dem Knopf, der die Bestellung auslöst. */
.kul-page .kul-zahlung__abschluss { gap: 20px; }
.kul-page.woocommerce-checkout .validate-required.terms { margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   37. Footer mobil
   Drei untereinander gestapelte Spalten machen den Footer auf dem Telefon
   unnötig lang. Zweispaltig passt alles in den sichtbaren Bereich.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .kul-footer__oben {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
    padding-bottom: 32px;
  }
  /* Marke und Social über die volle Breite, die Linkspalten paarweise. */
  .kul-footer__marke,
  .kul-footer__social { grid-column: 1 / -1; }
  .kul-footer__marke { padding-top: 0; }
  .kul-footer__spalte { flex: none; }
  .kul-footer__titel { margin-bottom: 12px; font-size: 17px; }
  .kul-footer__links { gap: 8px; font-size: 15px; }

  .kul-footer__unten { padding-top: 24px; gap: 16px; }
  .kul-footer__recht { gap: 10px 20px; font-size: 14px; }
}

@media (max-width: 400px) {
  .kul-footer__wortmarke { font-size: 32px; }
  .kul-footer__claim { font-size: 21px; }
}

/* "What we packed" unter der Story — gleiche Kacheln wie im Shop, aber nur
   so viele, dass der Block nicht zum Regal wird. */
.kul-story-seite__produkte { margin-top: clamp(56px, 6.5vw, 88px); }
.kul-story-seite__produkte .kul-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .kul-story-seite__produkte .kul-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Der Block darf die Textspalte überragen — er ist kein Fließtext. */
@media (min-width: 1100px) {
  .kul-story-seite__produkte {
    width: calc(100% + 2 * clamp(0px, 7vw, 160px));
    margin-inline: clamp(0px, -7vw, -160px);
  }
}

/* --------------------------------------------------------------------------
   38. Social
   -------------------------------------------------------------------------- */

.kul-social { width: 100%; }
.kul-social__raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px) { .kul-social__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kul-social__kachel {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--kul-bg-platzhalter);
  display: block;
}
.kul-social__kachel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.kul-page a.kul-social__kachel:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .kul-page a.kul-social__kachel:hover img { transform: none; }
}

.kul-sec--social { padding-block: clamp(40px, 5vw, 72px) 0; }

/* Produkt-Highlights: beschriftete Chip-Reihe statt lose Kästchen. */
.kul-highlights { margin-top: 24px; }
.kul-highlights__titel { margin-bottom: 10px; }
.kul-highlights .kul-merkmale { margin-top: 0; }

/* Voraussichtlicher Liefertermin unter dem Warenkorb-Knopf. */
.kul-lieferung {
  /* Steht zwischen Groessenwahl und Mengenfeld. */
  margin: 18px 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--kul-text-muted);
}
/* Das Datum darf nie umbrechen — "Mi., 7.10. –" auf der einen und
   "Do., 8.10." auf der naechsten Zeile liest sich wie zwei Angaben.
   Umbricht stattdessen das Label davor. */
.kul-lieferung__datum {
  color: var(--kul-text);
  font-weight: 500;
  white-space: nowrap;
}


/* Bestaetigung direkt unter dem Warenkorb-Knopf, statt Banner am Seitenkopf. */
/* Das hidden-Attribut setzt display:none nur im Browser-Stylesheet. Die
   eigene display-Regel darunter schlaegt es — ohne diese Zeile stand die
   Bestaetigung dauerhaft da, auch bei leerem Warenkorb. */
.kul-gekauft[hidden] { display: none; }
.kul-gekauft {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--kul-text);
}
.kul-gekauft__punkt {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kul-ok);
}
.kul-gekauft a {
  margin-left: auto;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
}

/* --------------------------------------------------------------------------
   Gesetzliche Gewährleistung (Richtlinie (EU) 2024/825)
   --------------------------------------------------------------------------
   Gezeigt wird ausschließlich die amtliche EU-Grafik (Farbfassung). Hier wird
   nur ihre Größe und Position bestimmt — keine Filter, keine Farbe, kein
   Zuschnitt.

   Warenkorb und Kasse bekommen den kompakten Hinweis, der Footer nur einen
   kleinen Link aufs Overlay. Auf Produktseiten erscheint nichts. */

.kul-gewaehr { margin: 24px 0 0; }
/* .kul-page img setzt max-width:100% und ist spezifischer als eine einzelne
   Klasse — die Breitenbegrenzung braucht deshalb dieselbe Tiefe. */
.kul-page .kul-gewaehr__bild { display: block; height: auto; width: 100%; max-width: 400px; }

/* Kasse: unter dem Kasten "Deine Bestellung", in der rechten Spalte. */
.kul-gewaehr--kasse { margin: 24px 0 0; }
.kul-gewaehr--kasse .kul-gewaehr__bild { max-width: 100%; }

/* Nur für Screenreader: sichtbar entfernt, aber vorlesbar.
   Nicht display:none — das würde auch die Vorlesefunktion abschalten. */
.kul-nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Produktbilder groß (Lightbox)
   -------------------------------------------------------------------------- */

/* Das Galeriebild wird zum Knopf. Der Knopf darf nichts mitbringen —
   kein Rand, keine Polsterung, kein eigener Hintergrund. */
.kul-page .kul-pdp__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: left;
}
.kul-page .kul-pdp__zoom img { display: block; width: 100%; height: auto; }
.kul-page .kul-pdp__zoom:focus-visible { outline: 2px solid var(--kul-text); outline-offset: 3px; }

/* Ganze Seite, weißer Grund. */
.kul-zoom {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--kul-bg-weiss);
  color: var(--kul-text);
  overflow: hidden;
}
.kul-zoom::backdrop { background: var(--kul-bg-weiss); }

.kul-zoom__bahn {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Luft am Ende, damit sich auch das letzte Bild nach oben scrollen lässt.
     Sonst bleibt es beim Anklicken dort hängen, wo der Scrollweg endet.
     Der Grund ist weiß, die Leerfläche fällt nicht auf. */
  padding: 24px clamp(16px, 5vw, 64px) 60vh;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
/* .kul-page figure { margin: 0 } ist spezifischer als eine einzelne Klasse
   und hat die Zentrierung ausgehebelt — das Bild klebte am linken Rand. */
.kul-page .kul-zoom__bild { margin: 0 auto; max-width: 1100px; }
.kul-zoom__bild + .kul-zoom__bild { margin-top: clamp(16px, 2vw, 32px); }
.kul-zoom__bild img { display: block; width: 100%; height: auto; }

/* Das X bleibt oben rechts stehen, auch beim Scrollen. */
/* Auf weißem Grund ist ein nacktes Kreuz kein Knopf. Es bekommt eine
   eigene Fläche mit feiner Linie — ruhig, aber als Schaltfläche erkennbar. */
.kul-page .kul-zoom__zu {
  position: fixed;
  top: clamp(16px, 2vw, 28px);
  right: clamp(16px, 5vw, 64px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--kul-linie-stark);
  border-radius: 50%;
  background: var(--kul-bg-weiss);
  color: var(--kul-text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.kul-zoom__kreuz { display: block; }
.kul-page .kul-zoom__zu:hover {
  background: var(--kul-text);
  border-color: var(--kul-text);
  color: var(--kul-text-invers);
}

/* Die Bildbahn ist fokussierbar, damit man sofort scrollen kann — der
   gesetzte Fokus soll dort aber keinen Rahmen zeichnen. */
.kul-zoom__bahn:focus { outline: none; }
.kul-zoom__bahn:focus-visible { outline: 2px solid var(--kul-text); outline-offset: -2px; }
.kul-page .kul-zoom__zu:focus-visible { outline: 2px solid var(--kul-text); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .kul-zoom__bahn { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Größentabelle als eigene Seite
   --------------------------------------------------------------------------
   Öffnet sich in einem neuen Fenster und zeigt nur die Zahlen — kein Header,
   kein Footer. Die Tabelle reicht von XXS bis 5XL und scrollt auf schmalen
   Geräten waagerecht in ihrem eigenen Rahmen, nicht die ganze Seite. */

body.kul-masstabelle {
  margin: 0;
  background: var(--kul-bg);
  color: var(--kul-text);
}
.kul-masstabelle__inhalt {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(24px, 6vw, 56px) clamp(16px, 5vw, 40px) 64px;
}
.kul-masstabelle__inhalt .kul-eyebrow { margin: 6px 0 28px; }
.kul-masstabelle__rahmen { overflow-x: auto; background: var(--kul-bg-weiss); }
.kul-masstabelle__h2 {
  margin: 40px 0 10px;
  font-size: 17px;
  font-weight: 500;
}
.kul-masstabelle__wie {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kul-text-grau);
}
/* Auf der eigenen Seite bekommt die Tabelle Luft und Zellenpolsterung —
   zehn Spalten ohne Abstand klebt zusammen. */
.kul-page.kul-masstabelle .kul-tabelle { margin: 0; min-width: 560px; }
.kul-page.kul-masstabelle .kul-tabelle th,
.kul-page.kul-masstabelle .kul-tabelle td { padding: 12px 14px; white-space: nowrap; }
.kul-page.kul-masstabelle .kul-tabelle thead tr { border-bottom: 1px solid var(--kul-text); }

/* Farbname auf der Produktkachel — jede Farbe ist ein eigener Eintrag im
   Listing, der Name macht den Unterschied lesbar. */
.kul-karte__farbe {
  display: block;
  font-size: 15px;
  color: var(--kul-text-muted);
}

/* About: Kicker und Überschrift gehören in dieselbe Rasterspalte.
   Ohne eigenen Kopf-Container reißt das zweispaltige Raster sie auseinander. */
.kul-zweispalt__kopf { min-width: 0; }
.kul-zweispalt__kopf .kul-eyebrow { margin-bottom: 12px; }

/* Schlusszeile der About-Seite: drei Zeilen plus Wortmarke, ohne Button. */
.kul-cta__wortmarke {
  margin-top: 28px;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .9;
}

/* --------------------------------------------------------------------------
   Kasse: Feinschliff an Zahlungsblock und Zustimmung
   -------------------------------------------------------------------------- */

/* Die Felder der Kartenzahlung kommen von Mollie und bringen eigene Abstände
   mit: links 46px eingerückt, rechts nur 18px — das sitzt sichtbar schief.
   Sie bekommen denselben Einzug wie der Kasten, auf beiden Seiten gleich. */
.kul-page.woocommerce-checkout .kul-option__inhalt .mollie-components,
.kul-page.woocommerce-checkout .kul-option__inhalt .mollie-components > div {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  /* Keine Breitenangabe: Mollie setzt die Felder selbst auf 100 %, eine
     eigene Breite hier macht sie schmal statt bündig. */
  max-width: none;
}
.kul-page.woocommerce-checkout .mollie-component-label {
  display: block;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 400;
  color: var(--kul-text-grau);
}
.kul-page.woocommerce-checkout .mollie-components > div + div { margin-top: 14px; }

/* Datenschutzhinweis und Zustimmung stehen zwischen Zahlungsart und dem
   Knopf, der die Bestellung auslöst — sie brauchen Luft nach oben, sonst
   lesen sie sich wie ein Teil der letzten Zahlungsart. */
.kul-page.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-top: 10px; }
.kul-page.woocommerce-checkout .woocommerce-privacy-policy-text p { margin: 0 0 18px; }

/* Hinweis auf virtuelle Modelle, unter den Produktangaben. */
.kul-abbildung { margin: 14px 0 0; color: var(--kul-text-muted); }

/* Die Newsletter-Zustimmung an der Kasse ist ein nacktes <label> direkt im
   Adressblock — ohne .form-row drumherum greift keine der Abstandsregeln,
   und sie klebte am Feld darüber. Gilt für jedes Kästchen, das so dasteht. */
.kul-page.woocommerce-checkout .kul-adresse > .woocommerce-form__label-for-checkbox {
  display: block;
  margin: 22px 0 0;
}
.kul-page.woocommerce-checkout .kul-adresse > .woocommerce-form__label-for-checkbox + .woocommerce-form__label-for-checkbox {
  margin-top: 12px;
}

/* Knopf während des Ablegens: gedämpft, aber nicht springend. */
.kul-page .kul-btn--laedt { opacity: .7; cursor: progress; }
.kul-gekauft--fehler .kul-gekauft__punkt { background: var(--kul-fehler); }
.kul-gekauft--fehler { color: var(--kul-fehler); }

/* --------------------------------------------------------------------------
   Mitlaufende Kaufleiste (Produktseite)
   --------------------------------------------------------------------------
   Erscheint, sobald der Kaufknopf im Inhalt aus dem Bild ist. Vorbild:
   pasnormalstudios.com.
   -------------------------------------------------------------------------- */
.kul-kaufleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--kul-bg-weiss);
  border-top: 1px solid var(--kul-linie);
  /* Auf Geräten mit Gestenleiste sitzt der Knopf sonst darunter. */
  padding: 10px var(--kul-rand) calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 16px rgba(0, 0, 0, .06);
  animation: kul-kaufleiste-ein .18s ease-out;
}
/* Das hidden-Attribut verliert gegen jede eigene display-Regel — dieselbe
   Falle wie bei den Farbgalerien und der Kaufbestätigung. */
.kul-kaufleiste[hidden] { display: none; }

@keyframes kul-kaufleiste-ein {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .kul-kaufleiste { animation: none; }
}

.kul-kaufleiste__inner {
  max-width: var(--kul-inhalt);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.kul-kaufleiste__info { min-width: 0; flex: 1; }

.kul-kaufleiste__name {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--kul-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kul-kaufleiste__variante {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--kul-text-muted);
}
.kul-kaufleiste__variante:empty { display: none; }

.kul-page .kul-kaufleiste__knopf {
  flex: none;
  width: 340px;
  max-width: 55vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 22px;
  height: 56px;
}

/* Ohne gewählte Größe ist der Knopf kein Kaufknopf — er führt zur Auswahl. */
.kul-page .kul-kaufleiste__knopf--warten { background: var(--kul-text-weich); }

.kul-kaufleiste__preis {
  font-weight: 500;
  white-space: nowrap;
}
.kul-kaufleiste__preis .woocommerce-Price-amount { font-weight: 500; }

/* Platz schaffen, damit die Leiste nichts verdeckt — etwa den Footer. */
body.kul-hat-kaufleiste { padding-bottom: 86px; }

@media (max-width: 760px) {
  .kul-kaufleiste__info { display: none; }
  .kul-page .kul-kaufleiste__knopf { width: 100%; max-width: none; }
  body.kul-hat-kaufleiste { padding-bottom: 92px; }
}

@media print {
  .kul-kaufleiste { display: none; }
}

/* Widerrufsformular auf /vertrag-widerrufen/ */
.kul-widerruf { margin-top: 28px; max-width: 640px; }
.kul-widerruf .kul-feldpaar { margin-bottom: 20px; }
.kul-widerruf__hinweis { margin-top: 18px; color: var(--kul-text-muted); }
.kul-widerruf__fehler {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-left: 3px solid var(--kul-fehler);
  background: var(--kul-bg-weiss);
  color: var(--kul-fehler);
}
.kul-widerruf__danke {
  margin-top: 28px;
  padding: 20px 24px;
  border-left: 3px solid var(--kul-ok);
  background: var(--kul-bg-weiss);
}
.kul-widerruf__danke p { margin: 0; }

/* Anmeldung: eine Aufgabe je Seite. Die zweispaltige Fassung ist entfallen,
   die Registrierung steht unter /konto/registrieren/. */
.kul-anmeldung__spalte { max-width: 450px; }
.kul-anmeldung__wechsel {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--kul-linie);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  font-size: 15px;
  color: var(--kul-text-grau);
}

/* --------------------------------------------------------------------------
   Suche
   --------------------------------------------------------------------------
   Im Kopf klappt sie unter der Kopfzeile auf, im mobilen Menue steht sie
   fest. Gesucht wird in Produkten — die Trefferseite ist dann das
   gestaltete Shop-Raster.
   -------------------------------------------------------------------------- */
.kul-suche {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Das hidden-Attribut verliert gegen display:flex. */
.kul-suche[hidden] { display: none; }

.kul-suche--kopf {
  border-top: 1px solid var(--kul-linie-header);
  background: var(--kul-bg-weiss);
  padding: 14px max(var(--kul-rand), calc((100% - var(--kul-inhalt)) / 2));
}

.kul-suche__lupe { display: flex; color: var(--kul-text-muted); }
.kul-suche__lupe svg { width: 20px; height: 20px; }

.kul-page .kul-suche input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  border-bottom: 1px solid var(--kul-linie-input);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 17px;
  color: var(--kul-text);
  padding: 0;
}
.kul-page .kul-suche input[type="search"]:focus {
  outline: 0;
  border-bottom-color: var(--kul-text);
}

.kul-page .kul-suche__knopf {
  all: unset;
  cursor: pointer;
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--kul-text);
}
.kul-page .kul-suche__knopf:focus-visible { outline: 2px solid var(--kul-text); outline-offset: 2px; }

/* Im Menue sitzt sie als erste Zeile der unteren Gruppe. */
.kul-suche--mobil { padding: 6px 0 10px; }

/* --------------------------------------------------------------------------
   Ruecksendung anmelden (/ruecksendung/)
   Zwei Schritte: nachweisen, dann waehlen. Optik wie das Widerrufsformular,
   damit die beiden Wege nicht wie zwei verschiedene Shops aussehen.
   -------------------------------------------------------------------------- */
.kul-retoure { margin-top: 28px; max-width: 640px; }
.kul-retoure .kul-feldpaar { margin-bottom: 28px; }
/* Der Knopf bekommt zusaetzlich eigenen Abstand: 20px reichten nicht, ein
   52px hoher schwarzer Block direkt unter einem Eingabefeld sieht aus, als
   gehoere er dazu. */
.kul-page .kul-retoure__form > .kul-btn { margin-top: 8px; }
.kul-page .kul-retoure__lead { margin: 0 0 20px; color: var(--kul-text-muted); }
.kul-retoure__hinweis { margin-top: 18px; color: var(--kul-text-muted); }

.kul-retoure__fehler,
.kul-retoure__warnung {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-left: 3px solid var(--kul-fehler);
  background: var(--kul-bg-weiss);
  color: var(--kul-fehler);
}
.kul-retoure__warnung { border-left-color: var(--kul-text-muted); color: var(--kul-text); }

.kul-retoure__danke {
  margin-top: 28px;
  padding: 20px 24px;
  border-left: 3px solid var(--kul-ok);
  background: var(--kul-bg-weiss);
}
.kul-page .kul-retoure__danke p { margin: 0; }

.kul-page .kul-retoure__bestellung { margin: 0 0 20px; font-weight: 600; }

/* Artikelwahl. fieldset bringt eigene Rahmen und Abstaende mit — die muessen
   ausdruecklich weg, sonst sitzt der Block schief im Raster. */
.kul-page .kul-retoure__artikel {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--kul-linie);
}
.kul-page .kul-retoure__artikel legend {
  padding: 0;
  margin: 20px 0 12px;
  font-size: 15px;
  font-weight: 600;
}
.kul-retoure__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--kul-linie);
}
.kul-retoure__wahl { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.kul-retoure__wahl input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--kul-text); }
.kul-retoure__menge { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.kul-retoure__menge span { font-size: 14px; color: var(--kul-text-muted); }
.kul-page .kul-retoure__menge .kul-input { width: 72px; }

.kul-retoure__label {
  margin: 24px 0;
  padding: 16px 18px;
  background: var(--kul-bg-weiss);
  border: 1px solid var(--kul-linie);
}
.kul-page .kul-retoure__label p { margin: 10px 0 0 28px; color: var(--kul-text-muted); }

/* Honigtopf. Nicht display:none — manche Bots erkennen das und lassen das
   Feld dann gerade leer. */
.kul-page .kul-retoure .kul-retoure__falle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 560px) {
  .kul-retoure__zeile { flex-wrap: wrap; }
  .kul-retoure__menge { width: 100%; justify-content: flex-start; }
}

/* WooCommerce blendet .single_variation ein, sobald eine Variante aufgeloest
   ist (slideDown aus wc-add-to-cart-variation.js). Bei uns ist dieser Kasten
   IMMER LEER — Preis, Verfuegbarkeit und Beschreibung bauen wir selbst, und
   German Markets Variantenpreisblock ist abbestellt.

   Leer heisst aber nicht wirkungslos: er bringt margin-bottom: 30px mit. Beim
   Waehlen einer Groesse sprang der Bereich darunter deshalb um 6px nach unten,
   beim Abwaehlen zurueck (von Christian am 05.10.2026 gemeldet). Die Hoehe ist
   0, nur der Aussenabstand zaehlt — den nehmen wir weg.

   Nicht display:none: jQuerys slideDown setzt display als Inline-Stil und
   schlaegt damit jede Regel ohne !important. Und ein !important hier wuerde
   eine spaetere Meldung von WooCommerce unsichtbar machen. */
.kul-page .woocommerce-variation.single_variation,
.kul-page .single_variation_wrap > .single_variation { margin: 0; }

/* Zweiter Teil derselben Sache, beim ABWAEHLEN sichtbar:
   jQuerys slideUp() setzt fuer die Dauer der Animation `overflow: hidden`.
   Damit koennen die Aussenabstaende der (leeren) Kinder nicht mehr nach
   aussen durchschlagen — sie zaehlen auf einmal zur Hoehe des Kastens. Der
   sprang dadurch auf 9,9px und fiel ueber 200ms auf null zurueck: genau die
   Bewegung, die Christian gesehen hat.

   Deshalb duerfen die leeren Kinder gar keine Abstaende haben. Kommt dort je
   wieder Inhalt hinein, muessen die Abstaende bewusst neu gesetzt werden. */
.kul-page .single_variation > *,
.kul-page .woocommerce-variation-price,
.kul-page .woocommerce-variation-availability,
.kul-page .woocommerce-variation-description { margin: 0; }

/* Zweite Pillenreihe: Zielgruppe. Optisch leiser als die Kategorien —
   es ist eine Verfeinerung, keine zweite Hauptnavigation. */
.kul-filterleiste__pillen--zielgruppe { margin-top: 10px; }
.kul-filterleiste__pillen--zielgruppe .kul-pille { font-size: 14px; padding: 6px 14px; }
@media (max-width: 760px) {
  .kul-filterleiste__pillen--zielgruppe { margin-top: 8px; }
}

/* --------------------------------------------------------------------------
   Beschriftungen lesbar.

   Bricks faerbt <label> mit seiner eigenen Grauvorgabe
   (--bricks-color-grey-500, #9e9e9e). Auf unserem Grund #f6f5f2 sind das
   2,45:1 — WCAG AA verlangt 4,5:1. Gemessen mit axe-core auf Shop,
   Produktseite und Rücksendung: sechs Stellen, alle dieselbe Ursache.

   #666 bringt 5,3:1 und behaelt den leisen Ton, den das Design will.
   Die Farbe stand nie in unserem Stylesheet — deshalb war sie beim Lesen
   des eigenen CSS auch nicht zu finden.
   -------------------------------------------------------------------------- */
.kul-page label,
.kul-filterleiste label,
.kul-wahl__titel label,
.kul-feld label { color: var(--kul-text-muted); }