@charset "UTF-8";
/* =====================================================================
   KABERA FASHION – Design-System für WebSite X5 Pro
   "Alles außer gewöhnlich"
   ---------------------------------------------------------------------
   Hier änderst du das Aussehen der GANZEN Website an einer Stelle.
   Die wichtigsten Stellschrauben stehen ganz oben unter :root.
   ===================================================================== */

/* ---------- 1. Schriften ----------
   Anton und Archivo liegen auf dem EIGENEN Server (Ordner kabera-theme/fonts).
   Es wird nichts von Google geladen (DSGVO). */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/anton-v27-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/archivo-v25-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/archivo-v25-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/archivo-v25-latin-700.woff2") format("woff2"); }

/* ---------- 2. Stellschrauben (Farben, Schriften, Breite) ---------- */
:root {
  --kb-akzent:       #C8102E;   /* Kabera-Rot: Sale, Buttons, Badges  */
  --kb-akzent-dunkel:#8E0B20;   /* Link-Hover                          */
  --kb-schwarz:      #111111;
  --kb-weiss:        #FFFFFF;
  --kb-grau-hell:    #F2F2F0;   /* Bild-Hintergrund, Footer            */
  --kb-linie:        #E4E4E1;
  --kb-text-2:       #333333;   /* Fließtext dezent                    */
  --kb-text-3:       #4A4A4A;   /* Hinweise, durchgestrichene Preise   */

  --kb-font-display: "Anton", Impact, "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --kb-font-text:    "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --kb-breite:       1198px;    /* maximale Inhaltsbreite (passend zum X5-Raster 1150 px) */
  --kb-rand:         24px;      /* Abstand links/rechts                */
}

/* ---------- 3. Grundlagen ---------- */
html, body { overflow-x: clip; }
.kb, .kb * { box-sizing: border-box; }
.kb {
  text-align: left;
  font-family: var(--kb-font-text);
  color: var(--kb-schwarz);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.kb img { display: block; max-width: 100%; }
.kb a { color: var(--kb-schwarz); }
.kb a:hover { color: var(--kb-akzent-dunkel); }
:where(.kb) p, :where(.kb) h1, :where(.kb) h2, :where(.kb) h3 { margin: 0; }

/* Volle Bildschirmbreite – auch wenn die X5-Vorlage schmaler ist */
.kb-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.kb-wrap {
  max-width: var(--kb-breite);
  margin: 0 auto;
  padding-left: var(--kb-rand);
  padding-right: var(--kb-rand);
}

/* ---------- 4. Typografie ---------- */
.kb-display {
  font-family: var(--kb-font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
}
.kb-h1 { font-size: clamp(56px, 7.4vw, 120px); line-height: 1.2; letter-spacing: .005em; overflow-wrap: break-word; }
.kb-display { overflow-wrap: break-word; }
.kb-h2 { font-size: clamp(44px, 5vw, 72px); }
.kb-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--kb-akzent);
}
.kb-lead { font-size: 20px; line-height: 1.5; color: var(--kb-text-2); }
.kb-akzent-text { color: var(--kb-akzent); }

/* ---------- 5. Buttons ---------- */
.kb-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  font: inherit; font-size: 16px; font-weight: 700;
  text-decoration: none; border: 0; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.kb a.kb-btn--schwarz, .kb-btn--schwarz { background: var(--kb-schwarz); color: var(--kb-weiss); }
.kb a.kb-btn--schwarz:hover, .kb-btn--schwarz:hover { background: var(--kb-akzent); color: var(--kb-weiss); }
.kb a.kb-btn--rahmen, .kb-btn--rahmen { border: 2px solid var(--kb-akzent); color: var(--kb-akzent); background: transparent; }
.kb a.kb-btn--rahmen:hover, .kb-btn--rahmen:hover { background: var(--kb-akzent); color: var(--kb-weiss); }
.kb a.kb-btn--weiss, .kb-btn--weiss { background: var(--kb-weiss); color: var(--kb-schwarz); }
.kb a.kb-btn--weiss:hover, .kb-btn--weiss:hover { background: var(--kb-akzent); color: var(--kb-weiss); }
.kb a.kb-btn--link { padding: 0 8px; }
.kb-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.kb-btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- 6. Topbar (schwarzer Streifen ganz oben) ---------- */
.kb-topbar { background: var(--kb-schwarz); color: var(--kb-weiss); font-size: 13px; letter-spacing: .04em; }
.kb-topbar .kb-wrap {
  padding-top: 10px; padding-bottom: 10px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px;
}

/* ---------- 7. Kopfbereich: Logo + Icons ---------- */
.kb-logo { display: inline-flex; align-items: center; text-decoration: none; padding: 6px 0; }
.kb-logo__zeichen { width: 76px; height: auto; display: block; flex: none; }
.kb a.kb-logo { color: var(--kb-schwarz); }
.kb-logo__name { font-family: var(--kb-font-display); font-size: 36px; letter-spacing: .02em; line-height: 1; }
.kb-logo__zusatz { font-size: 11px; font-weight: 700; letter-spacing: .24em; }
.kb-icons { display: flex; gap: 4px; justify-content: flex-end; }
.kb-icon {
  width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--kb-schwarz); text-decoration: none;
}
.kb a.kb-icon:hover { background: var(--kb-grau-hell); color: var(--kb-akzent); }
.kb-icon svg { width: 22px; height: 22px; }

/* Vorschau-/Alternativ-Navigation (in X5 übernimmt das native Menü) */
.kb-header { border-bottom: 1px solid var(--kb-linie); background: var(--kb-weiss); }
.kb-header .kb-wrap { padding-top: 16px; padding-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; }
.kb-nav { flex: 1 1 480px; display: flex; flex-wrap: wrap; gap: 0 28px; font-size: 15px; font-weight: 600; }
.kb-nav a { text-decoration: none; padding: 12px 0; }
.kb .kb-nav a.kb-nav__sale { color: var(--kb-akzent); }

/* ---------- 8. Hero ---------- */
.kb-hero { padding-top: 56px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.kb-hero__text { flex: 1 1 440px; min-width: 0; }
.kb-hero__text .kb-kicker { margin-bottom: 20px; }
.kb-hero__text .kb-lead { margin-top: 28px; max-width: 520px; }
.kb-hero__text .kb-btns { margin-top: 36px; }
.kb-hero__bilder {
  flex: 1 1 420px; min-width: 0; position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.kb-hero__bilder img { width: 100%; object-fit: cover; object-position: center top; background: var(--kb-grau-hell); display: block; }
.kb-hero__bilder > a.kb-hero__bild { display: block; overflow: hidden; background: var(--kb-grau-hell); }
.kb-hero__bilder > a.kb-hero__bild img { height: 100%; transition: transform .6s ease; }
.kb-hero__bilder > a.kb-hero__bild:hover img { transform: scale(1.03); }
/* bis die echten Produktbilder gesetzt sind, nichts anzeigen (kein Flackern) */
.kb-hero__bilder:not(.kb-fertig) > img { opacity: 0; animation: kb-zeigen .3s 2.5s forwards; } /* Notfall: nach 2,5 s doch zeigen */
@keyframes kb-zeigen { to { opacity: 1; } }
.kb-hero__bilder > :nth-child(1) { grid-row: span 2; height: 588px; }
.kb-hero__bilder > :nth-child(2),
.kb-hero__bilder > :nth-child(3) { height: 288px; }
.kb-hero__bilder > :nth-child(2) { object-position: top; }
.kb-stoerer {
  position: absolute; left: 16px; bottom: 36px;
  width: 128px; height: 128px; border-radius: 999px;
  background: var(--kb-akzent); color: var(--kb-weiss);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--kb-font-display); font-size: 20px; line-height: 1.05;
  text-transform: uppercase; transform: rotate(-10deg);
}

/* ---------- 9. Laufband (rotes Band) ---------- */
.kb-band { background: var(--kb-akzent); color: var(--kb-weiss); overflow: hidden; }
.kb-band__spur {
  display: flex; gap: 36px; white-space: nowrap; width: max-content;
  padding: 16px 24px;
  font-family: var(--kb-font-display); font-size: 30px; letter-spacing: .04em; text-transform: uppercase;
  animation: kb-laufen 38s linear infinite;
}
.kb-band:hover .kb-band__spur { animation-play-state: paused; }
@keyframes kb-laufen { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .kb-band__spur { animation: none; } }

/* ---------- 10. Abschnitts-Kopf ("Finde deins" + Link rechts) ---------- */
.kb-abschnitt { padding-top: 88px; padding-bottom: 40px; }
.kb-abschnitt--unten { padding-top: 56px; padding-bottom: 88px; }
.kb-abschnitt__kopf {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 32px;
}
.kb-abschnitt__kopf a { font-weight: 700; font-size: 15px; }

/* ---------- 11. Kategorie-Kacheln ---------- */
.kb-kacheln { display: flex; flex-wrap: wrap; gap: 16px; }
.kb-kachel { flex: 1 1 220px; min-width: 0; text-decoration: none; display: flex; flex-direction: column; gap: 14px; }
.kb a.kb-kachel { color: var(--kb-schwarz); }
.kb-kachel__bild { overflow: hidden; background: var(--kb-grau-hell); }
.kb-kachel img { width: 100%; height: 440px; object-fit: cover; transition: transform .4s ease; }
.kb-kachel:hover img { transform: scale(1.04); }
.kb-kachel__titel { font-family: var(--kb-font-display); font-size: 30px; line-height: 1.05; text-transform: uppercase; }
.kb-kachel__link { font-size: 15px; font-weight: 600; color: #444444; }
.kb-kachel:hover .kb-kachel__link { color: var(--kb-akzent); }

/* ---------- 12. Produktkarten ---------- */
.kb-produkte { display: flex; flex-wrap: wrap; gap: 24px 16px; }
.kb-produkt { flex: 1 1 220px; min-width: 0; }
.kb-produkt a { text-decoration: none; }
.kb-produkt__bild { position: relative; background: var(--kb-grau-hell); }
.kb-produkt__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kb-badge {
  position: absolute; left: 12px; top: 12px;
  background: var(--kb-schwarz); color: var(--kb-weiss);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 10px;
}
.kb-badge--sale { background: var(--kb-akzent); }
.kb-produkt__name { margin: 14px 0 4px !important; font-size: 16px; font-weight: 600; }
.kb-produkt__preis { font-size: 16px; font-weight: 700; }
.kb-produkt__preis s { font-weight: 400; color: var(--kb-text-3); }
.kb-produkt__preis .kb-akzent-text { margin-right: 4px; }
.kb-produkt__info { margin-top: 4px !important; font-size: 13px; color: var(--kb-text-3); }

/* ---------- 13. Split: Bild + Text (Nachhaltigkeit) ---------- */
.kb-split { background: var(--kb-grau-hell); }
.kb-split .kb-wrap { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 64px; }
.kb-split__bild { flex: 1 1 440px; min-width: 0; width: 100%; height: 640px; object-fit: cover; object-position: top; }
.kb-split__text { flex: 1 1 480px; min-width: 0; padding: 72px 0; display: flex; flex-direction: column; justify-content: center; }
.kb-split__text .kb-kicker { margin-bottom: 16px; }
.kb-split__text .kb-h2 { font-size: clamp(44px, 4.6vw, 68px); }
.kb-split__text p.kb-fliess { margin-top: 24px; max-width: 480px; font-size: 18px; color: var(--kb-text-2); }
.kb-split__text .kb-btns { margin-top: 32px; }

/* ---------- 14. Schwarzer Block (Dein Maß) ---------- */
.kb-dunkel { background: var(--kb-schwarz); color: var(--kb-weiss); }
.kb-dunkel .kb-wrap { padding-top: 88px; padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: center; }
.kb-dunkel__titel { flex: 1 1 560px; min-width: 0; }
.kb-dunkel__titel .kb-display { font-size: clamp(56px, 7vw, 112px); line-height: .95; }
.kb-dunkel__text { flex: 1 1 420px; min-width: 0; }
.kb-dunkel__text p { font-size: 20px; line-height: 1.5; color: #E6E6E6; }
.kb-dunkel__text .kb-btn { margin-top: 28px; }

/* ---------- 15. Bewertungen + Newsletter ---------- */
.kb-duo { padding-top: 88px; padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 48px 80px; }
.kb-bewertung { flex: 1 1 380px; min-width: 0; }
.kb-bewertung__zahl { font-family: var(--kb-font-display); font-size: 120px; line-height: .9; }
.kb-sterne { margin-top: 12px; display: flex; gap: 4px; color: var(--kb-akzent); }
.kb-sterne svg { width: 26px; height: 26px; }
.kb-bewertung__quelle { margin-top: 12px !important; font-size: 18px; font-weight: 600; }
.kb-bewertung__links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 20px; }
.kb-bewertung__links a { font-weight: 700; }
.kb-newsletter { flex: 1 1 520px; min-width: 0; }
.kb-newsletter .kb-h2 { font-size: clamp(40px, 4.4vw, 64px); }
.kb-newsletter p.kb-fliess, .kb-bewertung p.kb-fliess { margin-top: 16px; font-size: 18px; color: var(--kb-text-2); max-width: 520px; }
.kb-bewertung .kb-h2 { font-size: clamp(40px, 4.4vw, 64px); }
.kb-formular { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.kb-feld { flex: 1 1 280px; display: flex; flex-direction: column; gap: 8px; }
.kb-feld label { font-size: 14px; font-weight: 600; }
.kb-feld input {
  height: 52px; padding: 0 16px; border: 2px solid var(--kb-schwarz); border-radius: 0;
  font: inherit; font-size: 16px; background: var(--kb-weiss); color: var(--kb-schwarz);
}
.kb-feld input:focus { outline: 3px solid var(--kb-akzent); outline-offset: 1px; }
.kb-formular__hinweis { margin-top: 12px !important; font-size: 13px; color: var(--kb-text-3); }
.kb-einwilligung { flex: 1 1 100%; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--kb-text-2); cursor: pointer; }
.kb-einwilligung input { width: 20px; height: 20px; min-height: 0 !important; padding: 0 !important; margin: 1px 0 0; flex: none; accent-color: var(--kb-schwarz); }
.kb-formular__meldung { margin-top: 12px !important; padding: 12px 14px; background: var(--kb-grau-hell); font-size: 14px; font-weight: 600; }
.kb-social { margin-top: 20px !important; font-size: 15px; font-weight: 600; }
.kb-social a { font-weight: 700; }

/* ---------- 16. Footer ---------- */
.kb-footer { background: var(--kb-grau-hell); }
.kb-footer .kb-wrap { padding-top: 64px; padding-bottom: 32px; }
.kb-footer__spalten { display: flex; flex-wrap: wrap; gap: 40px 64px; }
.kb-footer__marke { flex: 2 1 260px; min-width: 0; }
.kb-footer__marke .kb-display { font-size: 40px; }
.kb-footer__zeichen { display: block; width: 88px; height: auto; margin-bottom: 4px; color: var(--kb-schwarz); }
.kb-footer__marke p.kb-fliess { margin-top: 12px; max-width: 300px; color: var(--kb-text-2); }
.kb-footer nav { flex: 1 1 150px; display: flex; flex-direction: column; gap: 10px; }
.kb-footer nav a { text-decoration: none; }
.kb-footer__titel { margin-bottom: 4px !important; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.kb-footer__unten {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid #D6D6D2;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  font-size: 14px; color: #444444;
}
.kb-footer__recht { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------- 17. Unterseiten-Kopf (für Kategorie- & Infoseiten) ---------- */
.kb-seitenkopf { padding-top: 56px; padding-bottom: 32px; }
.kb-seitenkopf .kb-kicker { margin-bottom: 12px; }
.kb-seitenkopf .kb-lead { margin-top: 20px; max-width: 640px; }

/* ---------- 18. Handy & Tablet ---------- */
@media (max-width: 900px) {
  .kb-hero { padding-top: 32px; gap: 32px; }
  .kb-hero__bilder > :nth-child(1) { height: 420px; }
  .kb-hero__bilder > :nth-child(2),
  .kb-hero__bilder > :nth-child(3) { height: 204px; }
  .kb-abschnitt { padding-top: 56px; }
  .kb-split__bild { height: 420px; margin-left: calc(-1 * var(--kb-rand)); margin-right: calc(-1 * var(--kb-rand)); width: calc(100% + 2 * var(--kb-rand)); max-width: none; }
  .kb-split__text { padding: 40px 0 56px; }
  .kb-dunkel .kb-wrap, .kb-duo { padding-top: 56px; padding-bottom: 56px; }
}
@media (max-width: 600px) {
  :root { --kb-rand: 16px; }
  .kb-h1 { font-size: clamp(44px, 14vw, 64px); }
  .kb-topbar span[aria-hidden] { display: none; }
  .kb-topbar .kb-wrap { gap: 2px 16px; }
  .kb-lead, .kb-dunkel__text p { font-size: 18px; }
  .kb-hero__bilder > :nth-child(1) { height: 340px; }
  .kb-hero__bilder > :nth-child(2),
  .kb-hero__bilder > :nth-child(3) { height: 164px; }
  .kb-stoerer { width: 96px; height: 96px; font-size: 15px; left: 8px; bottom: 16px; }
  .kb-band__spur { font-size: 22px; gap: 24px; padding: 12px 16px; }
  .kb-kacheln { gap: 24px 12px; }
  .kb-kachel { flex: 1 1 calc(50% - 6px); gap: 10px; }
  .kb-kachel img { height: 240px; }
  .kb-kachel__titel { font-size: 20px; }
  .kb-kachel__link { font-size: 14px; }
  .kb-produkte { gap: 24px 12px; }
  .kb-produkt { flex: 1 1 calc(50% - 6px); }
  .kb-produkt__name { font-size: 14px; }
  .kb-badge { left: 8px; top: 8px; font-size: 10px; padding: 4px 7px; }
  .kb-bewertung__zahl { font-size: 96px; }
  .kb-logo__name { font-size: 30px; }
  .kb-logo__zeichen { width: 60px; }
  .kb-header .kb-wrap { gap: 4px 16px; }
  .kb-icons { margin-left: auto; }
  .kb-nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 0 22px; scrollbar-width: none; }
  .kb-nav a { white-space: nowrap; }
  .kb-logo__zusatz { font-size: 10px; letter-spacing: .2em; }
}

/* =====================================================================
   19. Angleichung der X5-eigenen Elemente
   ---------------------------------------------------------------------
   Damit auch Texte, die du direkt in X5 schreibst (Textobjekt, Shop,
   Formulare, Menü), im Kabera-Look erscheinen. X5 vergibt eigene
   Klassennamen; sollte etwas nach einem X5-Update nicht greifen,
   stellst du die Werte im X5-Stil-Editor ein (siehe ANLEITUNG.md).
   ===================================================================== */
body, #imContent, #imFooter, #imHeader { font-family: var(--kb-font-text); color: var(--kb-schwarz); }
#imContent h1, #imContent h2, .imHeading1, .imHeading2 {
  font-family: var(--kb-font-display); font-weight: 400; text-transform: uppercase; line-height: 1; letter-spacing: .005em;
}
#imContent h3, .imHeading3 { font-family: var(--kb-font-text); font-weight: 700; }
#imContent a:not(.kb *):hover { color: var(--kb-akzent-dunkel); }
#imContent input[type="text"], #imContent input[type="email"], #imContent textarea, #imContent select {
  border: 2px solid var(--kb-schwarz); border-radius: 0; font-family: var(--kb-font-text);
}

/* =====================================================================
   20. SHOP – Kategorieseiten (Damen, Herren, Handtaschen, Accessoires, Sale)
   ---------------------------------------------------------------------
   Gestaltet das X5-Objekt "Produktkatalog" im Kabera-Look:
   Raster mit 4 Spalten, Fotos im Hochformat 4:5, Name, Preis,
   automatisches rotes SALE-Etikett bei reduzierten Produkten.
   Wichtig in X5 (Produktkatalog → Einstellungen):
     • Kartenanordnung: "Variable Höhe"  (nicht "Gleiche Höhe")
     • Layout der Karte: Bild oben
   Abgestimmt auf WebSite X5 Pro 2026.3 (x5engine-card).
   ===================================================================== */

/* Seitentitel, den X5 automatisch über jede Seite setzt */
#imContent > header { display: flex; flex-direction: column-reverse; gap: 12px; padding: 56px 0 8px; text-align: left; }
#imContent #imPgTitle {
  font-family: var(--kb-font-display) !important; font-weight: 400 !important;
  font-size: clamp(44px, 5vw, 72px) !important; line-height: 1 !important;
  text-transform: uppercase; letter-spacing: .005em; color: var(--kb-schwarz) !important; text-align: left !important;
  margin: 0 !important; padding: 0 !important;
}
#imContent #imBreadcrumb {
  font-family: var(--kb-font-text) !important; font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: .2em; text-transform: uppercase; color: var(--kb-akzent) !important;
  text-align: left !important; margin: 0 !important; padding: 0 !important;
}
#imContent #imBreadcrumb a { color: inherit !important; text-decoration: none; }

/* Raster */
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-cardlayout {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 40px 16px !important;
  overflow: visible !important;
}
@media (max-width: 1149.9px) { :is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-cardlayout { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 719.9px)  { :is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-cardlayout { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 12px !important; } }

/* Karte */
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-card {
  display: flex !important; flex-direction: column !important;
  max-width: none !important; width: auto !important; height: auto !important;
  margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  overflow: visible !important; position: relative;
  font-family: var(--kb-font-text) !important; color: var(--kb-schwarz);
}
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-card:focus-visible { outline: 3px solid var(--kb-akzent); outline-offset: 4px; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-card * { font-family: var(--kb-font-text) !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-card > [slot="cover"]    { order: 1; width: 100% !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-card > [slot="title"],
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-card > [slot="contents"] { display: block !important; justify-items: stretch !important; align-items: stretch !important; text-align: left !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-cardlayout { height: auto !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-card > [slot="contents"] { flex: 1 1 auto; display: flex !important; flex-direction: column; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-wrapper-contents { flex: 1 1 auto; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .screen-reader-only-even-focused {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; margin: -1px !important; padding: 0 !important;
}
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-card > [slot="title"]    { order: 2; width: 100% !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-card > [slot="contents"] { order: 3; width: 100% !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-card > [slot="cockades"] { position: absolute; left: 12px; top: 12px; z-index: 3; width: auto !important; height: auto !important; pointer-events: none; }

/* Bild */
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-wrapper-products-image {
  position: relative; width: 100% !important; height: auto !important;
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--kb-grau-hell); margin: 0 !important; padding: 0 !important;
}
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-products-image {
  width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  object-fit: cover !important; object-position: center top; cursor: pointer;
  transition: transform .5s ease; border-radius: 0 !important;
}
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-card:hover .im-cc-products-image { transform: scale(1.04); }

/* automatisches SALE-Etikett, sobald ein Streichpreis existiert */
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-card:has(.full-price) .im-cc-wrapper-products-image::after {
  content: "Sale"; position: absolute; left: 12px; top: 12px; z-index: 2;
  background: var(--kb-akzent); color: var(--kb-weiss);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px;
}

/* Lupe / Details-Symbole: runde weiße Knöpfe oben rechts */
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-wrapper-image-icons {
  position: absolute !important; right: 8px !important; top: 8px !important; left: auto !important; bottom: auto !important;
  display: flex !important; flex-direction: column; gap: 8px; z-index: 3;
  background: none !important; width: auto !important; height: auto !important; padding: 0 !important;
  opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s;
}
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-card:hover .im-cc-wrapper-image-icons,
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) x5engine-card:focus-within .im-cc-wrapper-image-icons { opacity: 1; transform: none; }
@media (hover: none) { :is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-wrapper-image-icons { opacity: 1; transform: none; } }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-wrapper-image-icons button {
  width: 44px !important; height: 44px !important; padding: 12px !important; margin: 0 !important;
  border-radius: 999px !important; background: var(--kb-weiss) !important; border: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-wrapper-image-icons button:hover { background: var(--kb-schwarz) !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-wrapper-image-icons svg { width: 18px !important; height: 18px !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-wrapper-image-icons svg, :is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-wrapper-image-icons svg * { fill: var(--kb-schwarz) !important; stroke: none !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-wrapper-image-icons button:hover svg,
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-wrapper-image-icons button:hover svg * { fill: var(--kb-weiss) !important; }

/* Name + Kategorie */
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-wrapper-title { padding: 14px 0 4px !important; margin: 0 !important; text-align: left !important; background: none !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-products-name,
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-products-name a {
  font-size: 16px !important; font-weight: 600 !important; line-height: 1.35 !important;
  color: var(--kb-schwarz) !important; text-decoration: none !important; text-align: left !important;
  margin: 0 !important; padding: 0 !important; text-transform: none !important;
}
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-products-name a:hover { color: var(--kb-akzent-dunkel) !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-products-category { display: none !important; }

/* Preis, Verfügbarkeit, Button */
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-wrapper-contents {
  display: flex !important; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 0 !important; margin: 0 !important; text-align: left !important; background: none !important;
}
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-wrapper-row { display: contents !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-products-price { order: 1; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-products-availability {
  order: 2; font-size: 13px !important; color: var(--kb-text-3) !important; margin: 0 0 12px !important; padding: 0 !important; text-align: left !important;
}
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-products-availability > span { display: none !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-products-price { font-size: 16px !important; font-weight: 700 !important; text-align: left !important; margin: 0 !important; padding: 0 !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .product_price { font-size: 16px !important; font-weight: 700 !important; color: var(--kb-schwarz) !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-products-price:has(.full-price) .product_price { color: var(--kb-akzent) !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .full-price {
  font-size: 15px !important; font-weight: 400 !important; color: var(--kb-text-3) !important;
  text-decoration: line-through !important; margin-left: 6px !important;
}
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .full-price--hidden { display: none !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-products-ppcp-pay-later:empty { display: none !important; }
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-products-button {
  order: 3; width: 100% !important; min-height: 44px !important; height: auto !important; margin: auto 0 0 !important; padding: 0 16px !important;
  background: transparent !important; color: var(--kb-schwarz) !important;
  border: 2px solid var(--kb-schwarz) !important; border-radius: 0 !important;
  font-size: 14px !important; font-weight: 700 !important; letter-spacing: .02em; cursor: pointer;
  transition: background-color .15s, color .15s;
}
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .im-cc-products-button:hover { background: var(--kb-schwarz) !important; color: var(--kb-weiss) !important; }

/* Seitenzahlen unter dem Raster (bei mehr als 20 Produkten) */
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) + * a, :is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"]))) .pagination a { color: var(--kb-schwarz); }

/* =====================================================================
   21. KOPF & FOOTER für alle Seiten (aus den X5-Code-Feldern)
   Die alte X5-Kopfzeile, Fußzeile und Sticky-Leiste werden ausgeblendet,
   stattdessen erscheinen #kb-kopf und #kb-fuss.
   ===================================================================== */
#imHeaderBg, #imHeader, #imStickyBar, #imStickyBarContainer, #imFooterBg, #imFooter, #imSideBar { display: none !important; }
#imPageExtContainer, #imPageIntContainer, #imPage { background: var(--kb-weiss) !important; padding-top: 0 !important; margin-top: 0 !important; }
#imPage { display: block !important; min-width: 0 !important; max-width: none !important; width: auto !important; }
#imContent { grid-column: auto !important; grid-row: auto !important; }
#imContentGraphics { position: absolute !important; inset: 0 !important; min-height: 0 !important; height: auto !important; background: none !important; z-index: -1 !important; }
#imContent { max-width: var(--kb-breite) !important; margin: 0 auto !important; padding: 0 var(--kb-rand) 72px !important; background: transparent !important; box-sizing: border-box; float: none !important; width: auto !important; }
body { background: var(--kb-weiss) !important; margin: 0; }

.kb-chrome { position: relative; z-index: 900; }
#kb-kopf { position: sticky; top: 0; }
#kb-kopf .kb-header { border-bottom: 1px solid var(--kb-linie); background: var(--kb-weiss); }
#kb-kopf .kb-header .kb-wrap { padding-top: 12px; padding-bottom: 12px; display: flex; align-items: center; gap: 12px 36px; flex-wrap: nowrap; }
#kb-kopf .kb-nav { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; font-size: 15px; font-weight: 600; }
#kb-kopf .kb-nav a, .kb-nav__knopf { text-decoration: none; padding: 12px 0; color: var(--kb-schwarz); background: none; border: 0; font: inherit; cursor: pointer; }
#kb-kopf .kb-nav a:hover, .kb-nav__knopf:hover { color: var(--kb-akzent-dunkel); }
#kb-kopf .kb-nav a[aria-current="page"], .kb-nav__gruppe--aktiv > .kb-nav__knopf { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
#kb-kopf .kb-nav a.kb-nav__sale { color: var(--kb-akzent); }
.kb-nav__gruppe { position: relative; }
.kb-nav__knopf::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .15s; }
.kb-nav__knopf[aria-expanded="true"]::after { transform: translateY(0) rotate(-135deg); }
.kb-nav__unter {
  display: none; position: absolute; left: -20px; top: 100%; min-width: 230px; padding: 10px 0;
  background: var(--kb-weiss); border: 1px solid var(--kb-linie); box-shadow: 0 12px 28px rgba(0,0,0,.08); z-index: 950;
}
.kb-nav__knopf[aria-expanded="true"] + .kb-nav__unter { display: block; }
@media (hover: hover) and (min-width: 1101px) { .kb-nav__gruppe:hover .kb-nav__unter { display: block; } }
#kb-kopf .kb-nav__unter a { display: block; padding: 10px 20px; font-weight: 600; white-space: nowrap; }
#kb-kopf .kb-nav__unter a:hover { background: var(--kb-grau-hell); }
.kb-burger { display: none !important; border: 0; background: none; cursor: pointer; }

/* Handy & Tablet: Menü hinter dem Burger */
@media (max-width: 1100px) {
  .kb-burger { display: inline-flex !important; }
  #kb-kopf .kb-header .kb-wrap { flex-wrap: wrap; }
  #kb-kopf .kb-icons { margin-left: auto; }
  #kb-kopf .kb-nav {
    display: none; order: 9; flex: 1 1 100%; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    gap: 0; padding: 8px 0 16px; border-top: 1px solid var(--kb-linie); margin-top: 8px;
    max-height: calc(100vh - 130px); overflow-y: auto; font-size: 18px;
  }
  #kb-kopf .kb-nav.kb-nav--offen { display: flex; }
  #kb-kopf .kb-nav > a, .kb-nav__knopf { padding: 14px 0; border-bottom: 1px solid var(--kb-linie); text-align: left; width: 100%; }
  .kb-nav__knopf { display: flex; justify-content: space-between; align-items: center; }
  .kb-nav__unter { position: static; box-shadow: none; border: 0; padding: 0 0 8px 16px; min-width: 0; }
  #kb-kopf .kb-nav__unter a { padding: 12px 0; font-size: 16px; }
  #kb-kopf .kb-nav a[aria-current="page"] { text-underline-offset: 4px; }
}
@media (max-width: 600px) {
  #kb-kopf .kb-header .kb-wrap { padding-top: 8px; padding-bottom: 8px; gap: 8px; }
  #kb-kopf .kb-icons { gap: 0; }
  #kb-kopf .kb-icon { width: 42px; height: 42px; }
  #kb-kopf .kb-topbar .kb-wrap { padding-top: 7px; padding-bottom: 7px; font-size: 12px; }
  #kb-kopf .kb-topbar span:nth-child(n+3) { display: none; }
}
#kb-fuss .kb-footer { width: auto; margin: 0; }
#kb-kopf .kb-topbar { width: auto; margin: 0; }

/* =====================================================================
   22. GRUNDLAYOUT aller X5-Seiten
   Texte, Überschriften, Buttons und Formulare, die du in X5 anlegst,
   erscheinen im Kabera-Look.
   ===================================================================== */
#imContent, #imContent p, #imContent li, #imContent td, #imContent label, #imContent input, #imContent select, #imContent textarea, #imContent button {
  font-family: var(--kb-font-text) !important;
}
/* alle Texte aus X5-Objekten in Archivo (Bausteine .kb und Symbole ausgenommen) */
#imContent *:not(.kb, .kb *, svg, svg *, [class*="fa-"], [class*="icon"]) { font-family: var(--kb-font-text) !important; }
#imContent [class*="imTitle"], #imContent .imHeading1, #imContent .imHeading2, #imContent h1, #imContent h2,
#imContent [id^="imObjectTitle"] span, #imContent [id^="imObjectTitle"] h1, #imContent [id^="imObjectTitle"] h2, #imContent [id^="imObjectTitle"] h3 {
  font-family: var(--kb-font-display) !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: .005em; line-height: 1.05 !important;
}
#imContent [id^="imObjectTitle"] { padding-top: 8px; }
#imContent .imTACenter [id^="imObjectTitle"], #imContent [id^="imObjectTitle"] .imTACenter { text-align: left; }
#imContent b, #imContent strong { font-weight: 700; }
#imContent a:not(.kb *) { color: var(--kb-schwarz); }
#imContent a:not(.kb *):hover { color: var(--kb-akzent-dunkel); }
/* X5-Buttons (Objekt "Schaltfläche") */
#imContent [id^="imObjectButton"] a, #imContent [id^="imObjectButton"] button, #imContent .imCssButton,
#imContent input[type="button"], #imContent input[type="submit"], #imContent button[type="submit"] {
  font-family: var(--kb-font-text) !important; font-weight: 700 !important; font-size: 16px !important;
  background: var(--kb-schwarz) !important; color: var(--kb-weiss) !important; border: 0 !important; border-radius: 0 !important;
  min-height: 52px; padding: 0 28px !important; cursor: pointer; box-shadow: none !important; text-shadow: none !important;
  transition: background-color .15s;
}
#imContent [id^="imObjectButton"] a:hover, #imContent [id^="imObjectButton"] button:hover, #imContent .imCssButton:hover,
#imContent input[type="button"]:hover, #imContent input[type="submit"]:hover, #imContent button[type="submit"]:hover { background: var(--kb-akzent) !important; color: var(--kb-weiss) !important; }
/* Formulare */
#imContent input[type="text"], #imContent input[type="email"], #imContent input[type="tel"], #imContent input[type="password"],
#imContent input[type="number"], #imContent input[type="date"], #imContent select, #imContent textarea {
  border: 2px solid var(--kb-schwarz) !important; border-radius: 0 !important; background: var(--kb-weiss) !important;
  color: var(--kb-schwarz) !important; font-size: 16px !important; min-height: 48px; padding: 8px 14px !important; box-shadow: none !important; box-sizing: border-box;
}
#imContent textarea { min-height: 140px; }
#imContent input:focus, #imContent select:focus, #imContent textarea:focus { outline: 3px solid var(--kb-akzent) !important; outline-offset: 1px; }
#imContent select { appearance: none; -webkit-appearance: none; padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 18px !important; }

/* =====================================================================
   23. SHOP – Produktseite
   Galerie links, Infos rechts; Name groß in Anton, Preis mit Hinweis,
   großer Warenkorb-Button, Details darunter, "Passt dazu" als Karten.
   ===================================================================== */
#im-product-container { padding-top: 32px; }
#im-product-container .container-gallery-info x5engine-cardlayout { display: block !important; height: auto !important; }
#im-product-container .container-gallery-info x5engine-card {
  display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important; grid-template-rows: auto 1fr;
  column-gap: 56px; row-gap: 0; height: auto !important; max-width: none !important; width: 100% !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important;
  font-family: var(--kb-font-text) !important;
}
#im-product-container .container-gallery-info x5engine-card * { font-family: var(--kb-font-text) !important; }
#im-product-container .container-gallery-info x5engine-card > [slot="cover"]    { grid-column: 1 !important; grid-row: 1 / span 2 !important; min-width: 0; padding: 0 !important; }
#im-product-container .container-gallery-info x5engine-card > [slot="title"]    { grid-column: 2 !important; grid-row: 1 !important; padding: 0 !important; text-align: left !important; }
#im-product-container .container-gallery-info x5engine-card > [slot="contents"] { grid-column: 2 !important; grid-row: 2 !important; padding: 0 !important; text-align: left !important; }
#im-product-container .container-gallery-info x5engine-card > [slot="cockades"] { display: none; }
@media (max-width: 900px) {
  #im-product-container .container-gallery-info x5engine-card { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto; }
  #im-product-container .container-gallery-info x5engine-card > [slot="cover"],
  #im-product-container .container-gallery-info x5engine-card > [slot="title"],
  #im-product-container .container-gallery-info x5engine-card > [slot="contents"] { grid-column: 1 !important; grid-row: auto !important; }
  #im-product-container .container-gallery-info x5engine-card > [slot="title"] { padding-top: 24px !important; }
}
/* Galerie */
#im-product-container .im-cc-wrapper-products-image, #im-product-container .container-gallery { width: 100% !important; height: auto !important; background: none !important; }
#im-product-container .container-gallery-top { position: relative; background: var(--kb-grau-hell); height: auto !important; max-height: none !important; }
#im-product-container .container-gallery { display: block !important; }
#im-product-container .container-gallery-info x5engine-card > [slot="cover"] { overflow: visible !important; height: auto !important; }
#im-product-container .gallery-top, #im-product-container .gallery-top .swiper-wrapper, #im-product-container .gallery-top .swiper-slide { height: auto !important; max-height: none !important; }
#im-product-container .gallery-top .swiper-slide { background: var(--kb-grau-hell); }
#im-product-container .gallery-top .swiper-slide-image {
  width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 4 / 5; object-fit: cover !important; object-position: center top; cursor: zoom-in;
}
#im-product-container .container-gallery-thumbs, #im-product-container .gallery-thumbs, #im-product-container .gallery-thumbs .swiper-wrapper { height: auto !important; max-height: none !important; }
#im-product-container .container-gallery-thumbs { margin-top: 12px; }
#im-product-container .gallery-thumbs .swiper-slide { width: 88px !important; height: auto !important; cursor: pointer; border: 2px solid transparent; box-sizing: border-box; opacity: .7; transition: opacity .15s; }
#im-product-container .gallery-thumbs .swiper-slide:hover { opacity: 1; }
#im-product-container .gallery-thumbs .swiper-slide-thumb-active { border-color: var(--kb-schwarz); opacity: 1; }
#im-product-container .gallery-thumbs img { width: 84px !important; height: 105px !important; max-width: none !important; max-height: none !important; object-fit: cover !important; display: block; }
#im-product-container .swiper-button-next.top, #im-product-container .swiper-button-prev.top {
  width: 44px !important; height: 44px !important; margin-top: -22px !important; border-radius: 999px;
  background-color: rgba(255,255,255,.92) !important; background-repeat: no-repeat !important;
  background-size: 18px 18px !important; background-position: center !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.15); color: transparent !important;
  opacity: 0; transition: opacity .2s ease, background-color .2s ease;
}
/* Pfeile nur zeigen, wenn die Maus über dem Bild ist; auf dem Handy wischt man */
#im-product-container .container-gallery-top:hover .swiper-button-next.top:not(.swiper-button-disabled),
#im-product-container .container-gallery-top:hover .swiper-button-prev.top:not(.swiper-button-disabled),
#im-product-container .swiper-button-next.top:focus-visible, #im-product-container .swiper-button-prev.top:focus-visible { opacity: 1; }
#im-product-container .swiper-button-next.top:hover, #im-product-container .swiper-button-prev.top:hover { background-color: #fff !important; }
@media (hover: none) { #im-product-container .swiper-button-next.top, #im-product-container .swiper-button-prev.top { display: none !important; } }
#im-product-container .swiper-button-next.top { right: 12px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") !important; }
#im-product-container .swiper-button-prev.top { left: 12px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") !important; }
#im-product-container .swiper-button-next.top::after, #im-product-container .swiper-button-prev.top::after { display: none !important; }
#im-product-container .swiper-button-disabled.top { opacity: 0 !important; }
/* Name + Kategorie */
#im-product-container .container-gallery-info .im-cc-wrapper-title { display: flex !important; flex-direction: column-reverse; align-items: flex-start !important; text-align: left !important; gap: 10px; padding: 0 0 18px !important; margin: 0 !important; background: none !important; }
#im-product-container .container-gallery-info .im-cc-products-category {
  display: block !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .2em; text-transform: uppercase; color: var(--kb-akzent) !important;
}
#im-product-container .container-gallery-info .im-cc-products-name {
  font-family: var(--kb-font-display) !important; font-weight: 400 !important; text-transform: uppercase;
  font-size: clamp(34px, 3.4vw, 54px) !important; line-height: 1.02 !important; color: var(--kb-schwarz) !important; margin: 0 !important;
}
/* Beschreibung, Optionen, Preis, Button */
#im-product-container .container-gallery-info .im-cc-wrapper-contents { display: flex !important; flex-direction: column; gap: 18px; padding: 0 !important; margin: 0 !important; text-align: left !important; background: none !important; }
#im-product-container .container-gallery-info .im-cc-products-description { font-size: 16px !important; line-height: 1.6 !important; color: var(--kb-text-2) !important; margin: 0 !important; }
#im-product-container .im-cc-products-options { margin: 0 !important; }
#im-product-container .im-cc-products-options select { width: 100% !important; min-height: 52px; font-weight: 600 !important; }
#im-product-container .container-gallery-info .im-cc-wrapper-row { display: flex !important; flex-direction: column; align-items: stretch; gap: 14px; padding: 0 !important; margin: 0 !important; }
#im-product-container .container-gallery-info .im-cc-products-price { font-size: 26px !important; font-weight: 700 !important; margin: 0 !important; text-align: left !important; }
#im-product-container .container-gallery-info .product_price { font-size: 26px !important; font-weight: 700 !important; color: var(--kb-schwarz) !important; }
#im-product-container .container-gallery-info .im-cc-products-price:has(.full-price) .product_price { color: var(--kb-akzent) !important; }
#im-product-container .container-gallery-info .full-price { font-size: 18px !important; font-weight: 400 !important; color: var(--kb-text-3) !important; text-decoration: line-through !important; margin-left: 8px !important; }
#im-product-container .full-price--hidden { display: none !important; }
/* Pflichthinweis zum Preis – Kleinunternehmerin nach § 19 UStG.
   Ändert sich das (z. B. Umsatzsteuerpflicht), hier den Text anpassen. */
#im-product-container .container-gallery-info .im-cc-products-price::after {
  content: "Gemäß § 19 UStG wird keine Umsatzsteuer berechnet, zzgl. Versand";
  display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--kb-text-3); white-space: normal; line-height: 1.4;
}
#im-product-container .im-cc-products-ppcp-pay-later:empty { display: none !important; }
#im-product-container .container-gallery-info .im-cc-products-button {
  width: 100% !important; min-height: 56px !important; height: auto !important; margin: 4px 0 0 !important; padding: 0 24px !important;
  background: var(--kb-schwarz) !important; color: var(--kb-weiss) !important; border: 0 !important; border-radius: 0 !important;
  font-size: 17px !important; font-weight: 700 !important; cursor: pointer; transition: background-color .15s;
}
#im-product-container .container-gallery-info .im-cc-products-button:hover { background: var(--kb-akzent) !important; }
#im-product-container .container-gallery-info .im-cc-products-availability { font-size: 14px !important; font-weight: 600 !important; color: var(--kb-schwarz) !important; margin: 0 !important; }
#im-product-container .container-gallery-info .im-cc-products-availability > span { width: 18px !important; height: 18px !important; background-size: contain !important; }
/* Details (Schnitt, Material, Pflege …) */
#im-product-container .container-details { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--kb-linie); max-width: 760px; }
#im-product-container .container-details::before { content: "Details"; display: block; margin-bottom: 16px; font-family: var(--kb-font-display); font-size: 32px; text-transform: uppercase; line-height: 1; }
#im-product-container .container-details, #im-product-container .container-details * { font-family: var(--kb-font-text) !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--kb-text-2); }
#im-product-container .container-details b, #im-product-container .container-details strong { color: var(--kb-schwarz); font-weight: 700 !important; }
#im-product-container .container-details code { background: none !important; border: 0 !important; padding: 0 !important; }
#im-product-container .container-details input[type="button"] {
  margin-top: 16px; background: transparent !important; color: var(--kb-schwarz) !important; border: 2px solid var(--kb-schwarz) !important; min-height: 48px;
}
#im-product-container .container-details input[type="button"]:hover { background: var(--kb-schwarz) !important; color: var(--kb-weiss) !important; }
/* "Diese Produkte könnten Sie auch interessieren" */
#im-product-container .container-related-products { margin-top: 88px; }
#im-product-container .container-related-products .big-font {
  font-family: var(--kb-font-display) !important; font-weight: 400 !important; text-transform: uppercase;
  font-size: clamp(28px, 3vw, 44px) !important; line-height: 1.05 !important; margin-bottom: 28px;
}
#im-product-container .container-related-products .product-separator { display: none; }
#im-product-container .container-related-products x5engine-card { background: transparent !important; border: 0 !important; box-shadow: none !important; font-family: var(--kb-font-text) !important; display: flex !important; flex-direction: column; height: auto !important; }
#im-product-container .container-related-products x5engine-card * { font-family: var(--kb-font-text) !important; }
#im-product-container .container-related-products x5engine-card > * { padding: 0 !important; width: 100% !important; text-align: left !important; }
#im-product-container .container-related-products .im-cc-wrapper-products-image { aspect-ratio: 4 / 5; overflow: hidden; background: var(--kb-grau-hell); width: 100% !important; height: auto !important; }
#im-product-container .container-related-products .im-cc-products-image { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; object-position: center top; }
#im-product-container .container-related-products .im-cc-wrapper-title { padding: 14px 0 4px !important; text-align: left !important; }
#im-product-container .container-related-products .im-cc-products-name, #im-product-container .container-related-products .im-cc-products-name a { font-size: 16px !important; font-weight: 600 !important; color: var(--kb-schwarz) !important; text-decoration: none !important; }
#im-product-container .container-related-products .im-cc-products-category { display: none !important; }
#im-product-container .container-related-products .im-cc-wrapper-contents { padding: 0 !important; text-align: left !important; }
#im-product-container .container-related-products .im-cc-products-price { font-size: 16px !important; font-weight: 700 !important; text-align: left !important; }
#im-product-container .container-related-products .im-cc-products-price:has(.full-price) .product_price { color: var(--kb-akzent) !important; }
#im-product-container .container-related-products .full-price { font-weight: 400 !important; color: var(--kb-text-3) !important; text-decoration: line-through; margin-left: 6px; }
#im-product-container .screen-reader-only-even-focused { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }

/* =====================================================================
   24. GROSSE BILDANSICHT (X5-Galerie / Lightbox)
   ===================================================================== */
.showbox-bg { background-color: rgba(17,17,17,.94) !important; backdrop-filter: none !important; }
#imShowBox { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
#imShowBox img { border-radius: 0 !important; }
#imShowBoxClose, #imShowBoxPrev, #imShowBoxNext {
  width: 52px !important; height: 52px !important; border-radius: 999px !important; background: var(--kb-weiss) !important;
  display: inline-flex !important; align-items: center; justify-content: center; padding: 14px !important; opacity: 1 !important;
}
#imShowBoxClose { top: 20px !important; right: 20px !important; }
#imShowBoxPrev { left: 20px !important; }
#imShowBoxNext { right: 20px !important; }
#imShowBoxClose svg, #imShowBoxPrev svg, #imShowBoxNext svg { width: 22px !important; height: 22px !important; }
#imShowBoxClose svg *, #imShowBoxPrev svg *, #imShowBoxNext svg * { fill: var(--kb-schwarz) !important; stroke: var(--kb-schwarz) !important; }
#imShowBoxClose:hover, #imShowBoxPrev:hover, #imShowBoxNext:hover { background: var(--kb-akzent) !important; }
#imShowBoxClose:hover svg *, #imShowBoxPrev:hover svg *, #imShowBoxNext:hover svg * { fill: var(--kb-weiss) !important; stroke: var(--kb-weiss) !important; }
#imShowBoxProgress, #imShowBoxProgress * { color: var(--kb-weiss) !important; font-family: var(--kb-font-text) !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: .1em; }
#imShowBoxProgress { top: 34px !important; left: 28px !important; }
.im-showbox-thumb { opacity: .55; border: 2px solid transparent !important; border-radius: 0 !important; transition: opacity .15s; }
.im-showbox-thumb:hover, .im-showbox-thumb[aria-current="true"], .im-showbox-thumb.active, .im-showbox-thumb.selected { opacity: 1; border-color: var(--kb-weiss) !important; }
.im-showbox-thumb img { object-fit: cover !important; }

/* =====================================================================
   25. WARENKORB & KASSE, SUCHE, LOGIN
   ===================================================================== */
#imCartContainer { padding-top: 48px; }
#imCartContainer #imPgTitle { margin: 0 0 12px !important; }
#imCartContainer #cart-header p { color: var(--kb-text-2); font-size: 16px; }
#imCartContainer input[type="number"] { width: 80px !important; min-height: 44px; padding: 4px 10px !important; text-align: center; }
#imCartContainer .btn-go-back { background: transparent !important; color: var(--kb-schwarz) !important; border: 2px solid var(--kb-schwarz) !important; }
#imCartContainer .btn-go-back:hover { background: var(--kb-schwarz) !important; color: var(--kb-weiss) !important; }
#imCartContainer table { border-collapse: collapse; }
#imCartContainer th { font-weight: 700 !important; text-transform: uppercase; letter-spacing: .08em; font-size: 13px !important; }
#imCartContainer a { color: var(--kb-schwarz); }
#imCartContainer img { border-radius: 0 !important; }
#imCartContainer [class*="total"], #imCartContainer [id*="total"] { font-weight: 700; }
/* Schritte der Kasse (Warenkorb → Daten → Bestätigung) */
#imCartContainer [class*="step"] { font-family: var(--kb-font-text) !important; }
/* Suche & Login */
#imSearchPage #imPgTitle, #imLoginPage #imPgTitle { margin-top: 40px !important; }

/* Shop-Suche "Alle Kategorien": greift nur, solange dort noch "Bild als Hintergrund" eingestellt ist.
   Mit der neuen Projektdatei zeigt die Suche dieselben Karten wie die Kategorieseiten. */
#im-cartsearch-container x5engine-card[contentlayout="cover-as-background"] { border-radius: 0 !important; box-shadow: none !important; overflow: hidden; }
#im-cartsearch-container x5engine-card[contentlayout="cover-as-background"] * { font-family: var(--kb-font-text) !important; }
#im-cartsearch-container x5engine-card[contentlayout="cover-as-background"] .im-cc-wrapper-products-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 45%); pointer-events: none; }
#im-cartsearch-container x5engine-card[contentlayout="cover-as-background"] .im-cc-wrapper-products-image { position: relative; }
#im-cartsearch-container x5engine-card[contentlayout="cover-as-background"] .im-cc-products-name, #im-cartsearch-container x5engine-card[contentlayout="cover-as-background"] .im-cc-products-name a {
  font-family: var(--kb-font-text) !important; font-weight: 700 !important; font-size: 16px !important; line-height: 1.25 !important;
  color: var(--kb-weiss) !important; text-decoration: none !important; text-shadow: 0 1px 2px rgba(0,0,0,.4) !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none;
}
#im-cartsearch-container x5engine-card[contentlayout="cover-as-background"] .im-cc-products-price, #im-cartsearch-container x5engine-card[contentlayout="cover-as-background"] .product_price { color: var(--kb-weiss) !important; font-weight: 700 !important; }
#im-cartsearch-container x5engine-card[contentlayout="cover-as-background"] .full-price { color: rgba(255,255,255,.8) !important; text-decoration: line-through; font-weight: 400 !important; margin-left: 6px; }
#im-cartsearch-container .screen-reader-only-even-focused { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }

/* =====================================================================
   26. BAUSTEINE in X5-HTML-Code-Objekten (Startseite & Co.)
   X5 setzt um HTML-Objekte "overflow: hidden" und Innenabstände –
   das wird hier aufgehoben, damit farbige Bänder über die volle Breite gehen.
   ===================================================================== */
#imContent { overflow: visible !important; }
#imContent .imHTMLObject:has(> .kb) { overflow: visible !important; width: 100% !important; text-align: left !important; }
#imContent [id^="imCell_"]:has(> .imHTMLObject > .kb) { padding: 0 !important; }
#imContent .imHTMLObject > .kb > .kb-wrap { padding-left: 0; padding-right: 0; }

/* =====================================================================
   27. PRODUKTSEITE – Zusätze (von kabera.js eingefügt)
   ===================================================================== */
.kb-krumen { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 8px 0 24px; font-size: 13px; color: var(--kb-text-3); }
.kb-krumen a { color: var(--kb-text-3); text-decoration: none; }
.kb-krumen a:hover { color: var(--kb-schwarz); text-decoration: underline; }
.kb-krumen span:last-child { color: var(--kb-schwarz); font-weight: 600; }
.kb-vorteile { margin-top: 8px; }
.kb-vorteile__liste { list-style: none; margin: 0; padding: 18px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  border-top: 1px solid var(--kb-linie); border-bottom: 1px solid var(--kb-linie); }
.kb-vorteile__liste li { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--kb-text-2); }
.kb-vorteile__liste b { font-family: var(--kb-font-display); font-weight: 400; font-size: 18px; text-transform: uppercase; color: var(--kb-schwarz); letter-spacing: .01em; }
.kb-vorteile__info { margin-top: 14px !important; font-size: 13px; line-height: 1.5; color: var(--kb-text-3); }
.kb-vorteile__info a { color: var(--kb-schwarz); font-weight: 600; }
@media (max-width: 480px) { .kb-vorteile__liste { grid-template-columns: 1fr; gap: 10px; } .kb-vorteile__liste li { flex-direction: row; align-items: baseline; gap: 10px; } }
/* Details als Infokasten */
#im-product-container .container-details { max-width: none; background: var(--kb-grau-hell); border-top: 0; padding: 36px 40px; margin-top: 64px; }
@media (max-width: 600px) { #im-product-container .container-details { padding: 24px 20px; margin-left: calc(-1 * var(--kb-rand)); margin-right: calc(-1 * var(--kb-rand)); } }
/* Verfügbarkeit mit grünem Punkt */
#im-product-container .container-gallery-info .im-cc-products-availability { display: flex !important; align-items: center; gap: 8px; }
#im-product-container .container-gallery-info .im-cc-products-availability > span { display: none !important; }
#im-product-container .container-gallery-info .im-cc-products-availability::before { content: ""; width: 9px; height: 9px; border-radius: 9px; background: #1F7A3E; flex: none; }
/* Shop-Suche: Seitentitel und Bildabstände */
#im-cartsearch-container { padding-top: 48px; }
#im-cartsearch-container::before { content: "Alle Produkte"; display: block; margin-bottom: 28px; font-family: var(--kb-font-display); font-size: clamp(44px, 5vw, 72px); line-height: 1; text-transform: uppercase; }
:is([id^="imProductList"], #im-cartsearch-container) .im-cc-products-image { padding: 0 !important; border: 0 !important; }
#im-cartsearch-container x5engine-cardlayout { height: auto !important; }

/* =====================================================================
   28. KORREKTUREN NACH DEM ECHTEN X5-EXPORT
   ===================================================================== */
/* Produktkataloge: keine graue Fläche aus dem alten Design */
#imContent [id^="imCell_"]:has(> [id^="imProductList"]) > [id^="imCellStyleGraphics_"],
#imContent [id^="imCell_"]:has(> [id^="imProductList"]) > [id^="imCellStyleBorders_"] { background: none !important; border: 0 !important; box-shadow: none !important; }
#imContent [id^="imCell_"]:has(> [id^="imProductList"]) { background: none !important; }
#imContent [id^="imProductList"] { background: none !important; padding-left: 0 !important; padding-right: 0 !important; }
/* Startseite "Neu im Atelier": nur die ersten 4 Produkte (X5 ignoriert die Höchstzahl) */
#imProductList_405 x5engine-card:nth-of-type(n+5) { display: none !important; }
#imProductList_405 .im-cartsearch-pagination, #imProductList_405 [class*="pagination"] { display: none !important; }

/* Shop-Suche: Titel über die ganze Breite, Filterleiste links */
#im-cartsearch-container { flex-wrap: wrap !important; gap: 0 40px; align-items: flex-start; }
#im-cartsearch-container::before { flex: 1 1 100%; }
#im-cartsearch-container .filter-sidebar { flex: 0 0 240px !important; width: 240px !important; max-width: none !important; font-family: var(--kb-font-text) !important; }
#im-cartsearch-container .items-container { flex: 1 1 0 !important; min-width: 0; width: auto !important; }
#im-cartsearch-container .search-container { display: flex !important; gap: 0; width: 100% !important; margin-bottom: 28px !important; }
#im-cartsearch-container .search-container input.search { flex: 1 1 auto; min-width: 0; width: auto !important; border-right: 0 !important; }
#im-cartsearch-container .search-container .search-button {
  flex: none; width: 52px !important; height: 48px !important; min-height: 48px; padding: 0 !important; margin: 0 !important;
  background: var(--kb-schwarz) !important; border: 0 !important; border-radius: 0 !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: 20px !important;
}
#im-cartsearch-container .search-container .search-button > * { display: none !important; }
#im-cartsearch-container .search-container .search-button:hover { background-color: var(--kb-akzent) !important; }
#im-cartsearch-container .filter-container { margin-bottom: 24px; padding-top: 18px; border-top: 1px solid var(--kb-linie); }
#im-cartsearch-container .lbl-title { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--kb-schwarz) !important; margin-bottom: 10px; cursor: pointer; }
#im-cartsearch-container .filter-content, #im-cartsearch-container .filter-content * { font-size: 15px !important; color: var(--kb-text-2) !important; line-height: 1.9 !important; }
#im-cartsearch-container .filter-content input[type="checkbox"] { accent-color: var(--kb-schwarz); width: 16px; height: 16px; min-height: 0 !important; margin-right: 8px; vertical-align: -2px; }
#im-cartsearch-container .bar-order { border-bottom: 1px solid var(--kb-linie); margin-bottom: 24px !important; padding-bottom: 12px; align-items: center; }
#im-cartsearch-container .total-results, #im-cartsearch-container .total-results * { font-size: 14px !important; font-weight: 600 !important; color: var(--kb-text-3) !important; }
#im-cartsearch-container .sort-by, #im-cartsearch-container .sort-by * { font-size: 14px !important; font-weight: 600 !important; color: var(--kb-schwarz) !important; }
#im-cartsearch-container x5engine-cardlayout { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 900px) {
  #im-cartsearch-container .filter-sidebar { flex: 1 1 100% !important; width: 100% !important; }
  #im-cartsearch-container .items-container { flex: 1 1 100% !important; }
  #im-cartsearch-container x5engine-cardlayout { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Formular-Buttons (Kontakt, Druck-Anfrage …) in Kabera-Rot – sichtbar auf hellem und dunklem Grund */
#imContent form:not(.kb *) input[type="submit"], #imContent form:not(.kb *) button[type="submit"],
#imContent form:not(.kb *) input[type="button"][value="Senden"] { background: var(--kb-akzent) !important; color: var(--kb-weiss) !important; }
#imContent form:not(.kb *) input[type="submit"]:hover, #imContent form:not(.kb *) button[type="submit"]:hover { background: var(--kb-akzent-dunkel) !important; }
/* Handy-Menü: ☰ wird zu ✕ */
.kb-burger[aria-expanded="true"] svg path { d: path("M6 6l12 12M18 6L6 18"); }

/* ==========================================================================
   29. WARENKORB – Summe & „Weiter zur Bezahlung“ nur einmal
   X5 zeigt die Summe zweimal (unter der Liste und rechts im Kasten).
   Es bleibt nur der Kasten „Gesamtsumme“ rechts – auf dem Handy darunter.
   ========================================================================== */
#imCartContainer:has(#cart-sidebar) .container-copoun-and-totalprice .price-container,
#imCartContainer:has(#cart-sidebar .btn-proceed-to-order) .buttons-container .btn-next { display: none !important; }
#imCartContainer #cart-sidebar .btn-proceed-to-order { width: 100% !important; background: var(--kb-akzent) !important; border-color: var(--kb-akzent) !important; color: #fff !important; cursor: pointer; }
#imCartContainer #cart-sidebar .btn-proceed-to-order:hover { background: var(--kb-akzent-dunkel) !important; border-color: var(--kb-akzent-dunkel) !important; }


/* ==========================================================================
   30. AUTOMATIK für alle (auch neue) Produkte
   - Jedes Produktfoto im gleichen Format 4:5, egal wie groß das Original ist
   - Klick aufs Foto = Produktseite (siehe kabera.js), Lupe/Info-Knöpfe weg
   - Zahl am Warenkorb-Symbol
   ========================================================================== */
:is([id^="imProductList"], #im-cartsearch-container:not(:has([contentlayout="cover-as-background"])), #im-cartsearch-container) x5engine-card .im-cc-wrapper-image-icons { display: none !important; }
:is([id^="imProductList"], #im-cartsearch-container, #im-product-container .container-related-products) .im-cc-products-image { cursor: pointer !important; }
#im-cartsearch-container x5engine-card .im-cc-wrapper-products-image { aspect-ratio: 4 / 5; overflow: hidden; }
#im-cartsearch-container x5engine-card .im-cc-products-image { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top; }
#im-product-container .gallery-thumbs .swiper-slide img, #im-product-container .gallery-thumbs .swiper-slide-image { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top; }
#imCartContainer .cart-table img, #imCartContainer td img[src*="images/"] { aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; height: auto !important; }
#kb-kopf a.kb-icon[href*="cart/"] { position: relative; }
#kb-kopf .kb-zahl {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--kb-akzent); color: #fff;
  font: 700 11px/18px var(--kb-font-text); text-align: center; pointer-events: none;
  transform: scale(0); transition: transform .2s ease;
}
#kb-kopf .kb-icon--voll .kb-zahl { transform: scale(1); }

/* Vorteile auf der Produktseite sind Links */
.kb-vorteile__liste a { display: flex; flex-direction: column; gap: 4px; color: inherit !important; text-decoration: none !important; font: inherit !important; }
@media (max-width: 480px) { .kb-vorteile__liste a { flex-direction: row; align-items: baseline; gap: 10px; } }
.kb-vorteile__liste a b { transition: color .2s ease; }
.kb-vorteile__liste a:hover b { color: var(--kb-akzent); }
.kb-vorteile__liste a:hover span { text-decoration: underline; }

/* ---------- 31. Startseite: "Dein Lieblingsstück" (Upcycling) ---------- */
.kb a.kb-btn--rot, .kb-btn--rot { background: var(--kb-akzent); color: #fff; border-color: var(--kb-akzent); }
.kb a.kb-btn--rot:hover, .kb-btn--rot:hover { background: var(--kb-akzent-dunkel); border-color: var(--kb-akzent-dunkel); color: #fff; }
.kb-lieblingsstueck .kb-kicker { margin-bottom: 14px; }
.kb-social-knoepfe { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-size: 14px; color: var(--kb-text-2); }
.kb-social-knoepfe span { margin-right: 4px; }
.kb .kb-social-knoepfe a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--kb-linie); border-radius: 999px; color: var(--kb-schwarz); font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s; }
.kb .kb-social-knoepfe a:hover { border-color: var(--kb-schwarz); color: var(--kb-akzent); }

/* ---------- 32. Startseite: Blog-Artikel "Aus dem Atelier" ---------- */
.kb-journal { padding-bottom: 88px; }
.kb-journal[hidden] { display: none !important; }
.kb-journal__liste { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.kb a.kb-journal__karte { display: flex; flex-direction: column; gap: 8px; color: var(--kb-schwarz); text-decoration: none; }
.kb-journal__bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--kb-grau-hell); margin-bottom: 8px; }
.kb-journal__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.kb a.kb-journal__karte:hover .kb-journal__bild img { transform: scale(1.04); }
.kb-journal__kat { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--kb-akzent); }
.kb-journal__titel { font-family: var(--kb-font-display); font-size: 24px; line-height: 1.15; text-transform: uppercase; }
.kb-journal__mehr { font-size: 14px; font-weight: 700; margin-top: 2px; }
.kb a.kb-journal__karte:hover .kb-journal__mehr { color: var(--kb-akzent); }
@media (max-width: 900px) { .kb-journal__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kb-journal__liste .kb-journal__karte:nth-child(3) { display: none; } }
@media (max-width: 600px) { .kb-journal { padding-bottom: 56px; } .kb-journal__liste { grid-template-columns: 1fr; } .kb-journal__liste .kb-journal__karte:nth-child(3) { display: flex; } }

/* ---------- 33. Hauptüberschrift (h1) als kleine rote Zeile ---------- */
#imContent .kb .kb-display { font-family: var(--kb-font-display) !important; font-weight: 400 !important; }
#imContent .kb h1.kb-kicker, .kb h1.kb-kicker { font-family: var(--kb-font-text) !important; letter-spacing: .2em !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--kb-akzent) !important; margin: 0 0 20px !important; }
@media (max-width: 600px) { #imContent .kb h1.kb-kicker, .kb h1.kb-kicker { font-size: 12px !important; } }