/* ==========================================================
   koalu Shop – Frontend
   Farben/Schriften aus der Website (style.css :root), mit
   Fallbacks, falls der Shop ohne Website-Layout läuft.
   ========================================================== */
.ks-body {
    --ks-bg: var(--primary, #FBF8FF);
    --ks-text: var(--text-color, #0B0118);
    --ks-text-2: var(--text-color-2, #453F4E);
    --ks-accent: var(--accent-color, #704FE6);
    --ks-soft: var(--accent-color-4, #F7F1FF);
    --ks-line: #E7DDF8;
    --ks-radius: 18px;
    background: var(--ks-bg);
    color: var(--ks-text);
}

.ks-main { padding: 130px 0 80px; }
.ks-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* Überschriften */
.ks-h1 { font-family: 'Huger Black', var(--font-1, sans-serif); font-size: 48px; line-height: 1.1; margin: 0 0 28px; color: var(--ks-text); }
.ks-h2 { font-family: 'Huger Black', var(--font-1, sans-serif); font-size: 30px; line-height: 1.15; margin: 0 0 20px; color: var(--ks-text); }

/* Brotkrumen */
.ks-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; font-size: 14px; color: var(--ks-text-2); }
.ks-crumbs li + li::before { content: "/"; margin-right: 6px; color: #b9acd6; }
.ks-crumbs a { font-size: 14px; color: var(--ks-accent); text-decoration: none; }
.ks-crumbs a:hover { text-decoration: underline; }

/* Beschreibungstexte (auch im Admin-Editor 1:1 verwendet) */
.shop-desc { font-size: 16px; line-height: 1.6; color: var(--ks-text-2, #453F4E); }
.shop-desc p { font-size: inherit; margin: 0 0 1em; color: inherit; }
.shop-desc h2, .shop-desc h3 { font-family: var(--font-1, sans-serif); font-weight: 600; font-size: 18px; line-height: 1.35; margin: 1.2em 0 .5em; color: var(--ks-text, #0B0118); }
.shop-desc h2:first-child, .shop-desc h3:first-child { margin-top: 0; }
.shop-desc h3:empty, .shop-desc p:empty { display: none; }
.shop-desc ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1em; }
.shop-desc ol { list-style: decimal; padding-left: 1.4em; margin: 0 0 1em; }
.shop-desc li { margin: 0 0 .35em; }
.shop-desc hr { border: 0; border-top: 1px solid var(--ks-line, #E7DDF8); margin: 1.4em 0; opacity: 1; }
.shop-desc img { max-width: 100%; height: auto; }
.shop-desc a { color: var(--ks-accent, #704FE6); font-size: inherit; }
.shop-desc strong { color: var(--ks-text, #0B0118); }

.ks-intro { max-width: 820px; margin-bottom: 36px; }

/* Rubrik-Kacheln */
.ks-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; }
.ks-tile { display: flex; flex-direction: column; background: #fff; border-radius: var(--ks-radius); overflow: hidden; text-decoration: none;
    box-shadow: 0 6px 24px rgba(112, 79, 230, .08); transition: transform .2s, box-shadow .2s; }
.ks-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(112, 79, 230, .16); }
.ks-tile-img { display: block; aspect-ratio: 1 / 1; background: var(--ks-soft); }
.ks-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-tile-title { display: block; padding: 14px 18px 16px; font-size: 18px; font-weight: 600; color: var(--ks-text); }

/* Produkt-Raster */
.ks-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: 48px; }
.ks-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--ks-radius); overflow: hidden; text-decoration: none;
    box-shadow: 0 6px 24px rgba(112, 79, 230, .08); transition: transform .2s, box-shadow .2s; }
.ks-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(112, 79, 230, .16); }
.ks-card-img { display: block; aspect-ratio: 3 / 2; background: #fff; }
.ks-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ks-card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; border-top: 1px solid var(--ks-line); flex: 1; }
.ks-card-title { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ks-text); }
.ks-card-price { font-size: 17px; color: var(--ks-accent); font-weight: 600; margin-top: auto; }
.ks-card-price s { color: var(--ks-text-2); font-weight: 400; margin-right: 6px; }
.ks-badge { align-self: flex-start; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.ks-badge--off { background: #fdecec; color: #b42318; }

.ks-category-desc { max-width: 820px; padding-top: 8px; }
.ks-empty { color: var(--ks-text-2); }

/* Produktseite */
.ks-product { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-bottom: 56px; }
.ks-gallery-main { position: relative; background: #fff; border-radius: var(--ks-radius); overflow: hidden; aspect-ratio: 3 / 2;
    box-shadow: 0 6px 24px rgba(112, 79, 230, .08); }
.ks-gallery-main img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.ks-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .92); color: var(--ks-text, #0B0118); font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); padding: 0 0 4px; }
.ks-gallery-nav--prev { left: 12px; }
.ks-gallery-nav--next { right: 12px; }
.ks-gallery-nav:hover { background: #fff; color: var(--ks-accent, #704FE6); }
/* Vorschaubilder: eine Reihe zum Schieben. Bei 20 Bildern wuerde ein
   umbrechendes Raster drei Zeilen hoch werden -- eine Reihe mit Pfeilen
   bleibt gleich ruhig, egal wie viele Bilder ein Produkt hat. */
.ks-thumbsleiste { position: relative; margin-top: 14px; }
/* Weicher Rand, wo es weitergeht -- so sieht man auf einen Blick,
   dass hinter dem Pfeil noch Bilder stehen. */
.ks-thumbsleiste::before, .ks-thumbsleiste::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 56px;
    pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1; }
.ks-thumbsleiste::before { left: 0;
    background: linear-gradient(to right, var(--ks-bg, #FBF8FF) 18%, transparent); }
.ks-thumbsleiste::after { right: 0;
    background: linear-gradient(to left, var(--ks-bg, #FBF8FF) 18%, transparent); }
.ks-thumbsleiste[data-links]::before, .ks-thumbsleiste[data-rechts]::after { opacity: 1; }
.ks-thumbs { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x proximity; padding: 2px; scrollbar-width: none; -ms-overflow-style: none; }
.ks-thumbs::-webkit-scrollbar { display: none; }
.ks-thumb { box-sizing: border-box; flex: 0 0 78px; width: 78px; padding: 6px;
    border: 1px solid var(--ks-line, #E7DDF8); border-radius: 10px; overflow: hidden;
    background: #fff; aspect-ratio: 1 / 1; cursor: pointer; scroll-snap-align: start;
    transition: border-color .15s, box-shadow .15s; }
.ks-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ks-thumb:hover { border-color: var(--ks-accent); }
.ks-thumb.is-active { border-color: var(--ks-accent); box-shadow: 0 0 0 1px var(--ks-accent); }
.ks-thumbs-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ks-line, #E7DDF8);
    background: rgba(255, 255, 255, .96); color: var(--ks-text, #0B0118);
    font-size: 20px; line-height: 1; cursor: pointer;
    box-shadow: 0 2px 10px rgba(11, 1, 24, .14); }
.ks-thumbs-nav[hidden] { display: none; }
.ks-thumbs-nav--prev { left: -8px; }
.ks-thumbs-nav--next { right: -8px; }
.ks-thumbs-nav:hover { color: var(--ks-accent); border-color: var(--ks-accent); }

.ks-buybox { position: sticky; top: 120px; background: #fff; border-radius: var(--ks-radius); padding: 30px; box-shadow: 0 6px 24px rgba(112, 79, 230, .08); }
.ks-product-title { font-family: var(--font-1, sans-serif); font-size: 30px; font-weight: 700; line-height: 1.2; margin: 0 0 14px; color: var(--ks-text); }
.ks-price { font-size: 28px; font-weight: 700; color: var(--ks-accent); }
.ks-price-old { font-size: 20px; font-weight: 400; color: var(--ks-text-2); margin-right: 8px; }
.ks-price-note { font-size: 13px; color: var(--ks-text-2); margin-top: 2px; }
.ks-stock { margin: 14px 0 22px; font-size: 14px; font-weight: 600; }
.ks-stock::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.ks-stock.is-ok { color: #1b7a4b; }
.ks-stock.is-ok::before { background: #43A574; }
.ks-stock.is-off { color: #b42318; }
.ks-stock.is-off::before { background: #e5484d; }
.ks-delivery { font-weight: 400; color: var(--ks-text-2); }

/* Pflichtangaben im Kaufkasten: Artikelnummer, Material, Maße,
   Versand, Hersteller. Schmale Zeilen, damit der Kaufknopf nicht
   unnoetig weit nach unten rutscht. */
.ks-kastenangaben { margin: 0 0 22px; display: grid; gap: 0; }
.ks-kastenangaben > div {
    display: flex; gap: 12px; padding: 7px 0;
    border-bottom: 1px solid rgba(100, 116, 139, .14);
    font-size: 13.5px; line-height: 1.5;
}
.ks-kastenangaben > div:first-child { border-top: 1px solid rgba(100, 116, 139, .14); }
.ks-kastenangaben dt {
    flex: 0 0 112px; margin: 0; font-weight: 600; color: var(--ks-text);
}
.ks-kastenangaben dd { margin: 0; color: var(--ks-text-2); min-width: 0; overflow-wrap: break-word; }

/* Knopf „Vertrag widerrufen" -- unter den Rechtslinks, rechts.
   Bewusst kleiner und heller als der Kaufknopf: er soll zu finden
   sein, aber niemanden vom Kaufen abhalten. Gilt auf Produktseite,
   Warenkorb und Kasse. */
.ks-widerrufzeile { margin: 10px 0 0; text-align: right; }
.ks-widerrufknopf {
    display: inline-block; padding: 7px 15px; border-radius: 999px;
    background: #f1ecfd; border: 1px solid rgba(124, 92, 214, .28);
    color: #6b4fd0; font-size: 12.5px; font-weight: 600; line-height: 1.3;
    text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
.ks-widerrufknopf:hover,
.ks-widerrufknopf:focus-visible {
    background: #e6dcfb; border-color: rgba(124, 92, 214, .55); color: #573cba;
}

.ks-option { margin-bottom: 20px; }
.ks-option-title { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--ks-text); }
.ks-option-hint { font-size: 13px; color: var(--ks-text-2); margin-top: 6px; }
.ks-req { color: #e5484d; }
.ks-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-pill { position: relative; margin: 0; cursor: pointer; }
.ks-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ks-pill span { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 1.5px solid var(--ks-line); border-radius: 999px;
    font-size: 15px; color: var(--ks-text); background: #fff; transition: border-color .15s, background .15s; }
.ks-pill input:checked + span { border-color: var(--ks-accent); background: var(--ks-soft); color: var(--ks-accent); font-weight: 600; }
.ks-pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(112, 79, 230, .25); }
.ks-input { display: block; width: 100%; height: 44px; padding: 0 14px; border: 1.5px solid var(--ks-line); border-radius: 12px; font-size: 15px;
    background: #fff; color: var(--ks-text); font-family: inherit; }
.ks-input:focus { outline: none; border-color: var(--ks-accent); }
.ks-amount { position: relative; max-width: 220px; }
.ks-amount input { display: block; width: 100%; height: 48px; padding: 0 40px 0 14px; border: 1.5px solid var(--ks-line); border-radius: 12px; font-size: 18px; font-family: inherit; }
.ks-amount input:focus { outline: none; border-color: var(--ks-accent); }
.ks-amount-suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--ks-text-2); }

.ks-btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 28px; border-radius: 999px; border: 0;
    background: var(--ks-accent); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; transition: filter .15s; }
.ks-btn:hover { color: #fff; filter: brightness(1.08); }
.ks-btn--buy { width: 100%; margin-top: 6px; }
.ks-btn--soon, .ks-btn--soon:hover { background: var(--ks-soft); color: var(--ks-accent); border: 1.5px solid var(--ks-line); cursor: default; filter: none; }

.ks-product-desc { max-width: 860px; }

/* Lightbox */
.ks-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(11, 1, 24, .88); display: flex; align-items: center; justify-content: center; padding: 40px 70px; }
.ks-lightbox[hidden] { display: none; }
.ks-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ks-lightbox-close { position: absolute; top: 16px; right: 20px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }

.ks-notfound { text-align: center; min-height: 40vh; }

/* Eigener Rahmen (ohne Website-Layout) */
.ks-own-header { background: #fff; border-bottom: 1px solid var(--ks-line); padding: 18px 0; }
.ks-own-logo { font-family: 'Bubblegum Sans', sans-serif; font-size: 30px; color: var(--ks-accent); text-decoration: none; }
.ks-own-footer { padding: 28px 0; color: var(--ks-text-2); font-size: 14px; }
.ks-own-header + .ks-main { padding-top: 40px; }

/* Responsiv */
@media (max-width: 1199px) {
    .ks-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ks-product { gap: 32px; }
}
@media (max-width: 991px) {
    .ks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .ks-product { grid-template-columns: minmax(0, 1fr); }
    .ks-buybox { position: static; }
    .ks-h1 { font-size: 38px; }
}
@media (max-width: 575px) {
    .ks-main { padding-top: 100px; }
    .ks-wrap { padding: 0 16px; }
    .ks-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .ks-grid { grid-template-columns: 1fr; }
    .ks-h1 { font-size: 30px; }
    .ks-product-title { font-size: 24px; }
    .ks-buybox { padding: 22px; }
    /* Auf schmalen Geraeten passen Bezeichnung und Wert nicht
       nebeneinander -- dann untereinander. */
    .ks-kastenangaben > div { flex-direction: column; gap: 2px; padding: 8px 0; }
    .ks-kastenangaben dt { flex: none; }
    /* Etwas mehr Hoehe, damit der Knopf mit dem Finger gut zu
       treffen ist. */
    .ks-widerrufknopf { padding: 10px 17px; }
    /* Auf dem Handy wird gewischt -- da braucht es keine Pfeile. */
    .ks-thumbs { gap: 8px; padding-bottom: 6px; }
    .ks-thumb { flex: 0 0 64px; width: 64px; padding: 4px; }
    .ks-thumbs-nav { display: none !important; }
    .ks-tile-title { font-size: 15px; padding: 10px 12px 12px; }
    .ks-lightbox { padding: 20px 10px; }
}

/* Gutschein: Abstand zwischen Preis und Betragsfeld */
.ks-price + .ks-options { margin-top: 20px; }

/* ==========================================================
   Startseite – Bereich 1: Hinweis-Leiste + Slider
   ========================================================== */
.ks-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.ks-home-page .ks-main { padding-top: 0; }
.ks-home { padding-top: var(--ks-header-h, 60px); }

/* Hinweis-Leiste */
.ks-notice { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 0 16px;
    background: var(--ks-accent); color: #fff; }
.ks-notice-track { position: relative; flex: 0 1 820px; min-height: 44px; overflow: hidden; }
.ks-notice-item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 8px;
    color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .02em; text-align: center; line-height: 1.3;
    opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; pointer-events: none; }
.ks-notice-item.is-active { opacity: 1; transform: none; pointer-events: auto; }
.ks-notice-nav { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #fff;
    font-size: 24px; line-height: 1; padding: 0 0 3px; cursor: pointer; }
.ks-notice-nav:hover, .ks-notice-nav:focus-visible { background: rgba(255, 255, 255, .18); outline: none; }

/* Slider */
.ks-hero { position: relative; height: 600px; overflow: hidden; background: var(--ks-soft); }
.ks-hero-track { position: relative; height: 100%; }
.ks-hero-slide { position: absolute; inset: 0; visibility: hidden; transform: translateX(100%); transition: transform .8s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.ks-hero-slide.is-active { visibility: visible; transform: translateX(0); }
.ks-hero-slide.is-from-right, .ks-hero-slide.is-to-right { visibility: visible; transform: translateX(100%); }
.ks-hero-slide.is-from-left, .ks-hero-slide.is-to-left { visibility: visible; transform: translateX(-100%); }
.ks-hero-slide.ks-no-anim { transition: none !important; }
.ks-hero-img { position: absolute; top: 10px; bottom: 0; left: calc(50% + 40px); aspect-ratio: 670 / 805; max-width: calc(50% - 60px); overflow: hidden; }
.ks-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ks-hero-inner { position: relative; height: 100%; display: flex; align-items: center; }
.ks-hero-text { max-width: min(560px, 48%); }
.ks-hero-kicker { font-family: var(--font-2, 'Bubblegum Sans', sans-serif); font-size: 22px; color: var(--ks-accent); margin-bottom: 10px; }
.ks-hero-title { font-family: 'Huger Black', var(--font-1, sans-serif); font-size: 52px; line-height: 1.08; color: var(--ks-text); margin: 0 0 30px; }
.ks-hero-btn { height: 52px; padding: 0 34px; }
.ks-hero-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .9); color: var(--ks-text); font-size: 30px; line-height: 1; padding: 0 0 4px; cursor: pointer;
    box-shadow: 0 4px 16px rgba(11, 1, 24, .12); display: flex; align-items: center; justify-content: center; }
.ks-hero-nav:hover, .ks-hero-nav:focus-visible { background: #fff; color: var(--ks-accent); outline: none; }
.ks-hero-nav--prev { left: 20px; }
.ks-hero-nav--next { right: 20px; }
.ks-hero-dots { position: absolute; left: 0; right: 50%; bottom: 24px; z-index: 3; display: flex; justify-content: flex-end; gap: 10px; padding-right: 30px; }
.ks-hero-dot { width: 10px; height: 10px; border: 0; border-radius: 999px; padding: 0; background: rgba(11, 1, 24, .22); cursor: pointer; transition: width .25s, background .25s; }
.ks-hero-dot.is-active { width: 30px; background: var(--ks-accent); }

@media (max-width: 1199px) {
    .ks-hero { height: 520px; }
    .ks-hero-title { font-size: 40px; }
    .ks-hero-nav--prev { left: 10px; }
    .ks-hero-nav--next { right: 10px; }
    .ks-hero-inner { padding-left: 64px; }
    .ks-hero-img { left: calc(50% + 20px); }
}
@media (max-width: 767px) {
    .ks-notice-item { font-size: 13px; }
    .ks-hero { height: auto; }
    .ks-hero-track { display: grid; }
    .ks-hero-slide { position: relative; grid-area: 1 / 1; display: flex; flex-direction: column; }
    .ks-hero-img { position: relative; top: auto; bottom: auto; left: auto; width: 100%; max-width: none; height: 300px; aspect-ratio: auto; }
    .ks-hero-dots { right: 0; justify-content: center; padding-right: 0; }
    .ks-hero-inner { height: auto; padding: 24px 16px 62px; }
    .ks-hero-text { max-width: none; }
    .ks-hero-nav { top: 150px; }
    .ks-hero-kicker { font-size: 18px; margin-bottom: 6px; }
    .ks-hero-title { font-size: 32px; margin-bottom: 20px; }
    .ks-hero-btn { height: 46px; padding: 0 26px; }
    .ks-hero-nav { width: 38px; height: 38px; font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .ks-hero-slide, .ks-notice-item { transition: none; }
}

/* ==========================================================
   Startseite – Bereich 2: Banner + Produkt-Reiter
   ========================================================== */
/* ------------------------------------------------------------------
   Banner-Karten („Wimpel")
   ------------------------------------------------------------------
   Aufbau genau nach Vorlage: oben das farbige Band, darunter -- sauber
   getrennt -- Text, Bild und Knopf. Nichts ragt ins Band hinein.
   Die Form steckt in clip-path, damit keine Bilddatei noetig ist.
   ------------------------------------------------------------------ */
.ks-banners {
    --ks-bn-band: var(--ks-accent, #704FE6);
    --ks-bn-falte: #3C12D1;
    --ks-bn-kreis: #3610BF;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    margin-top: 50px;
}
.ks-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--ks-radius);
    background: #fff;
    text-decoration: none;
    color: var(--ks-text);
    box-shadow: 0 6px 20px rgba(112, 79, 230, .10);
    transition: transform .3s ease, box-shadow .3s ease;
}
a.ks-banner:hover, a.ks-banner:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(112, 79, 230, .20); }

/* ---------------------------------------------------------- das Band */
.ks-bn-band {
    position: relative;
    display: block;
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    height: 172px;
    background: var(--ks-bn-band);
    clip-path: polygon(0 0, 50% 13%, 100% 0, 100% 100%, 50% 87%, 0 100%);
}
/* Die Falten laufen nur bis zu einem Drittel der Breite -- bis zur
   Mitte wirkten sie wie ein zweiter Farbstreifen statt wie eine Falte. */
.ks-bn-falte { position: absolute; inset: 0; background: var(--ks-bn-falte); }
.ks-bn-falte--links  { clip-path: polygon(0 0, 34% 9%, 0 20%); }
.ks-bn-falte--rechts { clip-path: polygon(100% 80%, 66% 91%, 100% 100%); }

/* Logo und Namen sitzen mittig im Band, zwischen den beiden Falten */
.ks-bn-kopf {
    position: absolute;
    left: 16px;
    right: 16px;
    /* Fester Abstand von oben statt mittig: so beginnen Logo und
       Titel bei allen Karten einer Reihe auf derselben Linie, auch
       wenn ein Titel zweizeilig wird. */
    top: 29%;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.ks-bn-logo {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ks-bn-kreis);
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ks-bn-logo-bild {
    width: 60%;
    height: 60%;
    background: #fff;
    /* Das Logo liegt bei der Website, nicht im Shop. Liegt der Shop
       darunter, fuehren die zwei Ebenen hoch genau dorthin -- das ist
       der Rueckfall in var(). Laeuft der Shop auf eigener Domain,
       setzt layout.php --ks-logo-maske auf die volle Adresse, weil
       "../.." dann aus dem Shop heraus ins Nichts zeigt.
       Einzelangaben statt Kurzschreibweise: die Kurzform mit einer
       Variablen darin wird nicht von jedem Browser gelesen. */
    -webkit-mask-image: var(--ks-logo-maske, url("../../assets/koalu/koalu.svg"));
    mask-image: var(--ks-logo-maske, url("../../assets/koalu/koalu.svg"));
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.ks-bn-namen { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.ks-bn-titel {
    font-family: 'Huger Black', var(--font-1, sans-serif);
    font-size: 18px;
    color: #fff;
    /* Keine Silbentrennung -- „Nacken-kissen" sah nach Fehler aus */
    hyphens: manual;
    overflow-wrap: normal;
    /* Platz fuer zwei Zeilen reservieren: dann steht „koalu" bei jeder
       Karte der Reihe auf derselben Linie, egal wie lang der Titel ist. */
    min-height: 2.3em;
}
.ks-bn-marke { font-size: 14px; color: rgba(255, 255, 255, .72); }

/* ------------------------------------------------- alles unter dem Band
   Beginnt erst unterhalb der Kerbe, damit weder Text noch Bild das
   Band beruehren. */
.ks-bn-koerper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 16px 20px;
    flex: 1 1 auto;
}
/* Feste Hoehe fuer zwei Zeilen: so stehen die Bilder aller Karten einer
   Reihe auf derselben Linie, auch wenn eine Beschreibung fehlt. */
.ks-bn-text {
    display: block;
    width: 100%;
    min-height: 2.9em;
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ks-text-2);
}
.ks-bn-bild {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
}
.ks-bn-bild img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Der Knopf steht unter dem Bild, nicht darauf */
.ks-bn-knopf {
    flex: 0 0 auto;
    margin-top: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ks-accent, #704FE6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(112, 79, 230, .40);
    transition: background .2s ease, transform .2s ease;
}
a.ks-banner:hover .ks-bn-knopf { background: var(--ks-bn-falte); transform: scale(1.08); }

/* Linktext nur fuer Vorleseprogramme -- auf der Karte steht der Knopf */
.ks-bn-nurlese {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.ks-ptabs { margin-top: 70px; margin-bottom: 80px; }
.ks-ptabs-nav { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; margin: 0 auto 36px; padding: 5px; width: fit-content; max-width: 100%;
    background: var(--ks-soft); border-radius: 999px; }
.ks-ptabs-btn { height: 44px; padding: 0 24px; border: 0; border-radius: 999px; background: transparent; color: var(--ks-text-2);
    font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .2s, color .2s; }
.ks-ptabs-btn:hover { color: var(--ks-accent); }
.ks-ptabs-btn.is-active { background: #fff; color: var(--ks-accent); box-shadow: 0 2px 10px rgba(112, 79, 230, .12); }
.ks-ptabs-single { text-align: center; font-family: 'Huger Black', var(--font-1, sans-serif); font-size: 34px; margin: 0 0 30px; }
.ks-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.ks-pgrid[hidden] { display: none; }
.ks-pgrid.is-active { animation: ks-fade-up .45s ease both; }
@keyframes ks-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.ks-pcard { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ks-text);
    border: 1px solid rgba(112, 79, 230, .35); border-radius: var(--ks-radius); padding: 16px; }
/* Das Bild laeuft ueber die volle Breite und behaelt seine eigene Hoehe --
   es wird nichts abgeschnitten. Der Titel steht darueber, damit alle
   Kacheln einer Reihe trotzdem auf gleicher Hoehe anfangen. */
.ks-pcard-img { position: relative; display: block; overflow: hidden; border-radius: var(--ks-radius); background: #fff; margin-bottom: 10px;
    border: 1px solid #CCCCCC; }
.ks-pcard-img img { display: block; width: 100%; height: auto; transition: opacity .45s ease, transform .6s ease; }
.ks-pcard-img2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.ks-pcard:hover .ks-pcard-img.has-hover .ks-pcard-img1 { opacity: 0; }
.ks-pcard:hover .ks-pcard-img2 { opacity: 1; }
.ks-pcard:hover .ks-pcard-img img { transform: scale(1.04); }
.ks-pcard-badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 4px 12px; border-radius: 999px; background: var(--ks-accent); color: #fff;
    font-size: 13px; font-weight: 700; }
.ks-pcard-badge--off { background: #fff; color: #b42318; font-weight: 600; }
.ks-pcard-marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden; background: var(--ks-accent); color: #fff; padding: 7px 0; }
.ks-pcard-marquee-track { display: flex; width: max-content; animation: ks-marquee 12s linear infinite; }
.ks-pcard-marquee-group { display: flex; flex-shrink: 0; }
.ks-pcard-marquee-group span { padding: 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ks-pcard-marquee-group span::before { content: "✦"; margin-right: 18px; opacity: .7; }
@keyframes ks-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ks-pcard-name { font-size: 16px; font-weight: 600; line-height: 1.35; margin-bottom: 2px; }
.ks-pcard:hover .ks-pcard-name { color: var(--ks-accent); }
/* Kurzbeschreibung unter dem Bild */
.ks-pcard-text { font-size: 14px; line-height: 1.5; color: var(--ks-text-2); }
/* Der Preis sitzt unten -- so stehen die Preise einer Reihe auf einer Linie,
   auch wenn die Beschreibungen verschieden lang sind. */
.ks-pcard-price { margin-top: auto; padding-top: 4px; display: flex; flex-direction: column; row-gap: 2px; }
.ks-pcard-preiszeile { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; row-gap: 2px;
    font-size: 16px; font-weight: 700; color: var(--ks-accent); }
.ks-pcard-preisalt { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; font-size: 14px; }
.ks-pcard-old { font-weight: 400; color: var(--ks-text-2); }
.ks-pcard-pct { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--ks-soft); font-size: 12px; font-weight: 700; color: var(--ks-accent); }
.ks-pcard-mwst { font-size: 12px; font-weight: 400; line-height: 1.3; color: var(--ks-text-2); }

@media (max-width: 1199px) {
    .ks-banners { gap: 18px; }
    .ks-bn-band { height: 150px; }
    .ks-bn-titel { font-size: 16px; }
    .ks-bn-logo { width: 38px; height: 38px; }
    .ks-bn-kopf { left: 13px; right: 13px; gap: 9px; }
    .ks-pgrid { gap: 20px; }
}
@media (max-width: 991px) {
    .ks-banners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ks-bn-band { height: 200px; }
    .ks-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .ks-banners { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
    .ks-bn-band { height: 124px; }
    .ks-bn-kopf { left: 10px; right: 10px; gap: 7px; }
    .ks-bn-logo { width: 30px; height: 30px; border-width: 2px; }
    .ks-bn-titel { font-size: 14px; }
    .ks-bn-marke { font-size: 11px; }
    .ks-bn-koerper { padding: 12px 10px 14px; gap: 10px; }
    .ks-bn-text { font-size: 12px; min-height: 3.2em; }
    .ks-bn-knopf { width: 34px; height: 34px; }
    .ks-ptabs { margin-top: 44px; margin-bottom: 56px; }
    .ks-ptabs-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; width: auto; border-radius: 16px; }
    .ks-ptabs-btn { flex-shrink: 0; height: 40px; padding: 0 16px; font-size: 14px; }
    .ks-pgrid { gap: 14px; }
    .ks-pcard-name, .ks-pcard-price { font-size: 14px; }
    .ks-pcard-badge { top: 8px; left: 8px; font-size: 11px; padding: 3px 9px; }
    .ks-pcard-marquee-group span { font-size: 10px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .ks-pcard-marquee-track { animation: none; }
    .ks-pgrid.is-active { animation: none; }
}

/* ---------- Startseite Bereich 3: Aktion mit Countdown + Vorteile ---------- */
.ks-promo { margin-top: 10px; margin-bottom: 70px; }
.ks-promo-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; overflow: hidden;
    border-radius: var(--ks-radius); background: var(--ks-soft); }
.ks-promo-box.no-img { grid-template-columns: minmax(0, 1fr); text-align: center; }
/* Die Bildspalte richtet sich nach dem Bild, nicht umgekehrt: 60 px Luft
   ringsum -- dasselbe Mass, das die Textspalte seitlich hat -- und darin
   das Bild in voller Breite. Die Hoehe ergibt sich daraus. Dadurch wird
   nie etwas beschnitten, gleich welches Format hochgeladen wird, und der
   Rahmen liegt genau auf der Bildkante.
   Frueher: aspect-ratio 1.2 mit min-height 100% und object-fit cover.
   Das min-height zog die Bildspalte auf die Hoehe der Textspalte, das
   Verhaeltnis 1.2 galt dadurch gar nicht sauber, und cover schnitt vom
   3:2-Bild links und rechts je 150 von 1500 Bildpunkten weg -- je nach
   Textlaenge unterschiedlich viel.
   Eine feste Flaeche mit gleichmaessigem Rand geht hier nicht: zieht man
   von einer 3:2-Flaeche ringsum 60 px ab, ist der Rest 1.71 statt 1.5 --
   der Rahmen saesse dann neben dem Bild statt daran. */
.ks-promo-img { position: relative; display: flex; box-sizing: border-box; padding: 60px; }
.ks-promo-img img { display: block; width: 100%; height: auto;
    box-sizing: border-box; border: 2px solid var(--ks-accent); }
.ks-promo-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding: 50px 60px; }
.ks-promo-box.no-img .ks-promo-body { align-items: center; padding: 60px 30px; }
.ks-promo-kicker { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ks-accent); }
.ks-promo-title { font-family: 'Huger Black', var(--font-1, sans-serif); font-size: 44px; line-height: 1.1; margin: 0; color: var(--ks-text); }
.ks-promo-text { font-size: 16px; line-height: 1.6; margin: 0; color: var(--ks-text-2); max-width: 460px; }
.ks-count { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.ks-count-part { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 78px; height: 82px;
    border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(112, 79, 230, .10); }
.ks-count-num { font-family: 'Huger Black', var(--font-1, sans-serif); font-size: 30px; line-height: 1; color: var(--ks-accent); font-variant-numeric: tabular-nums; }
.ks-count-lbl { margin-top: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ks-text-2); }
.ks-promo-btn { margin-top: 6px; }

.ks-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin-bottom: 90px; }
.ks-benefit { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; }
.ks-benefit-icon { display: block; width: 64px; height: 64px; margin-bottom: 14px; color: var(--ks-accent); transition: transform .3s ease; }
.ks-benefit-icon svg { display: block; width: 100%; height: 100%; stroke-width: .95; }
.ks-benefit:hover .ks-benefit-icon { transform: translateY(-4px); }
.ks-benefit-title { font-family: var(--font-1, sans-serif); font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: var(--ks-text); }
.ks-benefit-text { font-size: 15px; line-height: 1.6; margin: 0; color: var(--ks-text-2); max-width: 300px; }

@media (max-width: 1199px) {
    .ks-promo-body { padding: 40px; }
    .ks-promo-title { font-size: 36px; }
    .ks-count-part { width: 68px; height: 74px; }
    .ks-count-num { font-size: 26px; }
}
@media (max-width: 991px) {
    .ks-promo-box { grid-template-columns: minmax(0, 1fr); }
    .ks-promo-img { padding: 36px; }
    .ks-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 575px) {
    .ks-promo { margin-bottom: 50px; }
    .ks-promo-img { padding: 22px; }
    .ks-promo-body { padding: 28px 22px 32px; gap: 14px; }
    .ks-promo-title { font-size: 28px; }
    .ks-count { gap: 8px; }
    .ks-count-part { width: 62px; height: 66px; border-radius: 12px; }
    .ks-count-num { font-size: 22px; }
    .ks-count-lbl { font-size: 10px; }
    .ks-benefits { gap: 20px 12px; margin-bottom: 60px; }
    .ks-benefit-icon { width: 52px; height: 52px; margin-bottom: 8px; }
    .ks-benefit-title { font-size: 16px; }
    .ks-benefit-text { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .ks-benefit-icon { transition: none; }
    .ks-benefit:hover .ks-benefit-icon { transform: none; }
}