/* ============================================================
   chc.bike — 4-farben-palette (loads LAST)
   schwarz #000000 · grün #86CB58 · blau #8ED2FB · lavender #CDCBFB
   keine weiteren farben, keine verläufe, keine transparenzen —
   ausgenommen bilder.
   ============================================================ */
:root, :root[data-dir="paper"], :root[data-dir="ink"], :root[data-dir="press"] {
  --p-black: #000000;
  --p-green: #86CB58;
  --p-blue:  #8ED2FB;
  --p-lav:   #CDCBFB;

  --page-bg: var(--p-black) !important;
  --page-grad: none !important;
  --page-text: var(--p-lav) !important;
  --page-strong: var(--p-lav) !important;
  --page-muted: var(--p-blue) !important;
  --page-faint: var(--p-blue) !important;
  --hairline: var(--p-blue) !important;
  --hairline-strong: var(--p-lav) !important;
  --section-alt: var(--p-black) !important;
  --feature-bg: var(--p-green) !important;
  --feature-grad: none !important;
  --on-feature: var(--p-black) !important;
  --on-feature-mut: var(--p-black) !important;
  --card-bg: var(--p-black) !important;
  --card-border: var(--p-blue) !important;
  --card-text: var(--p-lav) !important;
  --card-strong: var(--p-lav) !important;
  --card-shadow: none !important;
  --card-shadow-lift: none !important;
  --nav-bg: var(--p-black) !important;
  --nav-border: var(--p-blue) !important;
  --nav-text: var(--p-lav) !important;
  --accent: var(--p-green) !important;
  --accent-strong: var(--p-green) !important;
  --canvas-ink: 205,203,251 !important;
  --canvas-line: var(--p-blue) !important;
  --canvas-glow: var(--p-green) !important;
  --av-ink: var(--p-lav) !important;
  --av-rust: var(--p-green) !important;
  --av-rust-dark: var(--p-green) !important;
  --av-line: var(--p-blue) !important;
  --av-line-strong: var(--p-lav) !important;
  --shadow-sm: none !important; --shadow-md: none !important; --shadow-lg: none !important;
}

html, body { background: var(--p-black) !important; color: var(--p-lav) !important; }
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
::selection { background: var(--p-green); color: var(--p-black); }
a { color: var(--p-lav); }
a:hover { color: var(--p-green); }
.dot, .accent { color: var(--p-green) !important; }

/* type hierarchy through the three hues, never through opacity */
h1, h2, h3, h4, h5, .display, .page-title, .wtitle, .folio-ch-title, .case-title, .svc-card h3, .rcat-title { color: var(--p-lav) !important; }
.eyebrow, .muted, .lede, .body, .folio-ch-desc, .case-meta, .case-num, .world-num, .footer-legal, .footer-bar, .svc-num, .folio-cat-pill, figcaption, small { color: var(--p-blue) !important; }
p, li, td, dd, span, label { color: inherit; }

/* buttons */
.btn, .btn--ink, .cf-chip[aria-pressed="true"] { background: var(--p-green) !important; border-color: var(--p-green) !important; color: var(--p-black) !important; }
.btn:hover, .btn--ink:hover { background: var(--p-blue) !important; border-color: var(--p-blue) !important; color: var(--p-black) !important; }
.btn--ghost, .cf-chip { background: transparent !important; color: var(--p-lav) !important; border: 1px solid var(--p-blue) !important; }
.btn--ghost:hover, .cf-chip:hover { color: var(--p-green) !important; border-color: var(--p-green) !important; }
.btn--on-feature { background: var(--p-black) !important; border-color: var(--p-black) !important; color: var(--p-green) !important; }
.btn--on-feature:hover { background: var(--p-black) !important; color: var(--p-lav) !important; border-color: var(--p-black) !important; }

/* nav + footer */
.chc-nav { background: var(--p-black) !important; border-bottom: 1px solid var(--p-blue) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.nav-links a, .nav-cta, .mobile-menu a, .nav-brand { color: var(--p-lav) !important; opacity: 1 !important; }
.nav-links a:hover, .nav-cta:hover, .mobile-menu a:hover { color: var(--p-green) !important; }
.nav-links a[aria-current="page"] { color: var(--p-green) !important; }
.mobile-menu, .mobile-panel { background: var(--p-black) !important; }
.chc-footer { background: var(--p-black) !important; border-top: 1px solid var(--p-lav) !important; }

/* surfaces & lines */
.section--alt, .section--tight, .page-hero, .hero { background: var(--p-black) !important; }
.card, .svc-card, .cookie-card, .prod, .jersey-arch, .spice, .logo-cell { background: var(--p-black) !important; border-color: var(--p-blue) !important; }
.card--interactive:hover, .prod:hover, .jersey-arch:hover, .logo-cell:hover { border-color: var(--p-green) !important; }
.tag { background: transparent !important; border: 1px solid var(--p-blue) !important; color: var(--p-blue) !important; }
hr, .hl, .rule { background: var(--p-blue) !important; border-color: var(--p-blue) !important; }
.marquee { border-color: var(--p-blue) !important; background: var(--p-black) !important; }
.marquee span { color: var(--p-green) !important; }
.hero-glow, .hero-veil, .hero-canvas { display: none !important; }

/* image plates stay black — the picture supplies the colour */
.prod-media, .jf-media, .ja-media, .spice-media, .folio-item, .case-item, .strip-item { background: var(--p-black) !important; }

/* icons */
svg:not(.emblem) { color: currentColor; opacity: 1 !important; }
.eyebrow svg, .tag svg { color: var(--p-blue) !important; }

/* creating cases */
.case-item { border-top: 1px solid var(--p-blue) !important; }
.case-panel { background: var(--p-black) !important; }
.case-title { color: var(--p-lav) !important; }
.case-link { color: var(--p-green) !important; border-bottom-color: var(--p-green) !important; }
.case-item:hover .case-link { color: var(--p-blue) !important; border-bottom-color: var(--p-blue) !important; }

/* feature band: green ground, black type */
.feature { background: var(--p-green) !important; background-image: none !important; }
.feature *, .feature .eyebrow, .feature-quote, .feature .lede { color: var(--p-black) !important; }
.band-enter { background: var(--p-black) !important; color: var(--p-green) !important; border-color: var(--p-black) !important; }
.band-enter:hover { background: var(--p-black) !important; color: var(--p-lav) !important; border-color: var(--p-black) !important; }

/* forms */
input, textarea, select { background: var(--p-black) !important; color: var(--p-lav) !important; border: 1px solid var(--p-blue) !important; }
input::placeholder, textarea::placeholder { color: var(--p-blue) !important; }
input:focus, textarea:focus, select:focus { border-color: var(--p-green) !important; outline: 1px solid var(--p-green) !important; }
.cookie-track { background: var(--p-blue) !important; }
.cookie-track::after { background: var(--p-black) !important; }
.cookie-sw input:checked + label .cookie-track { background: var(--p-green) !important; }

/* lightbox */
.lightbox, .lb-backdrop { background: var(--p-black) !important; }
.lb-close, .lb-prev, .lb-next, .lb-count { color: var(--p-lav) !important; background: transparent !important; border-color: var(--p-blue) !important; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { color: var(--p-green) !important; }

/* logo wall: marks are images — tint them to the palette */
.logo-cell img { filter: grayscale(1) invert(1) !important; opacity: 1 !important; }

/* ---------- ein farbton pro welt ---------- */
body[data-world="cycling"]  { --world: var(--p-green); }
body[data-world="creating"] { --world: var(--p-lav); }
body[data-world="cooking"]  { --world: var(--p-blue); }
body[data-world] { color: var(--world) !important; }
body[data-world] h1, body[data-world] h2, body[data-world] h3, body[data-world] h4, body[data-world] h5,
body[data-world] p, body[data-world] li, body[data-world] span, body[data-world] a, body[data-world] label,
body[data-world] td, body[data-world] th, body[data-world] dt, body[data-world] dd, body[data-world] figcaption, body[data-world] small,
body[data-world] .display, body[data-world] .page-title, body[data-world] .lede, body[data-world] .body, body[data-world] .muted,
body[data-world] .eyebrow, body[data-world] .folio-ch-title, body[data-world] .folio-ch-desc, body[data-world] .case-title,
body[data-world] .case-meta, body[data-world] .case-num, body[data-world] .case-link, body[data-world] .svc-card h3,
body[data-world] .svc-num, body[data-world] .rcat-title, body[data-world] .wtitle, body[data-world] .marquee span,
body[data-world] .footer-col h4, body[data-world] .footer-col a, body[data-world] .footer-legal, body[data-world] .footer-bar,
body[data-world] .nav-links a, body[data-world] .nav-cta, body[data-world] .mobile-menu a, body[data-world] .nav-brand,
body[data-world] .dot, body[data-world] .tag { color: var(--world) !important; }
body[data-world] a:hover, body[data-world] .nav-links a:hover, body[data-world] .nav-cta:hover,
body[data-world] .mobile-menu a:hover, body[data-world] .case-item:hover .case-link { color: var(--p-green) !important; }
body[data-world="cycling"] a:hover, body[data-world="cycling"] .nav-links a:hover,
body[data-world="cycling"] .case-item:hover .case-link { color: var(--p-lav) !important; }
/* type on the green feature band stays black for legibility */
body[data-world] .feature * { color: var(--p-black) !important; }
body[data-world] .btn { color: var(--p-black) !important; }

/* ---------- header, footer & partner: weiß ---------- */
.chc-nav, .chc-nav *, .mobile-menu, .mobile-menu *,
.chc-footer, .chc-footer *,
body[data-world] .chc-nav, body[data-world] .chc-nav *,
body[data-world] .mobile-menu, body[data-world] .mobile-menu *,
body[data-world] .chc-footer, body[data-world] .chc-footer * { color: #FFFFFF !important; }
.chc-nav .nav-links a:hover, .chc-nav .nav-cta:hover, .mobile-menu a:hover,
.chc-footer a:hover, body[data-world] .chc-nav .nav-links a:hover,
body[data-world] .chc-footer a:hover { color: var(--p-green) !important; }
.chc-nav .nav-links a[aria-current="page"], body[data-world] .chc-nav .nav-links a[aria-current="page"] { color: #FFFFFF !important; text-decoration-color: var(--p-green) !important; }
.chc-nav svg, .chc-footer svg, .mobile-menu svg { color: #FFFFFF !important; }
.partner-row img, .partner-logo img, .chc-footer .logo-cell img { filter: grayscale(1) invert(1) brightness(2) !important; opacity: 1 !important; }

/* ---------- partner-sektion: alle inhalte weiß ---------- */
.is-white, .is-white *, body[data-world] .is-white, body[data-world] .is-white * { color: #FFFFFF !important; }
.is-white .partner-logo:hover { opacity: 1 !important; }
.is-white .partner-row { border-top-color: #FFFFFF !important; }

/* ---------- header / footer / partner: linien + schrift weiß ---------- */
.chc-nav, .chc-nav *, .chc-footer, .chc-footer *, .mobile-menu, .mobile-menu *,
.is-white, .is-white *,
body[data-world] .chc-nav, body[data-world] .chc-nav *,
body[data-world] .chc-footer, body[data-world] .chc-footer *,
body[data-world] .is-white, body[data-world] .is-white * {
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  --hairline: #FFFFFF; --hairline-strong: #FFFFFF; --av-line: #FFFFFF; --av-line-strong: #FFFFFF;
  --page-text: #FFFFFF; --page-strong: #FFFFFF; --page-muted: #FFFFFF; --page-faint: #FFFFFF;
}
.chc-nav svg, .chc-footer svg, .mobile-menu svg, .is-white svg { color: #FFFFFF !important; stroke: currentColor !important; }
.chc-footer hr, .chc-nav hr, .is-white hr, .footer-bar, .footer-legal { border-color: #FFFFFF !important; }
.chc-nav .nav-links a:hover, .chc-nav .nav-cta:hover, .mobile-menu a:hover, .chc-footer a:hover, .is-white a:hover { color: var(--p-green) !important; }

/* höhere spezifität als die welt-/basisregeln: header, footer, partner komplett weiß */
.chc-nav a, .chc-nav span, .chc-nav h1, .chc-nav h4, .chc-nav p, .chc-nav svg, .chc-nav button,
.chc-footer a, .chc-footer span, .chc-footer h1, .chc-footer h2, .chc-footer h3, .chc-footer h4, .chc-footer p, .chc-footer li, .chc-footer svg, .chc-footer button, .chc-footer small,
.mobile-menu a, .mobile-menu span,
.is-white a, .is-white span, .is-white h1, .is-white h2, .is-white h3, .is-white h4, .is-white p, .is-white svg,
body[data-world] .chc-nav a, body[data-world] .chc-nav span, body[data-world] .chc-nav svg,
body[data-world] .chc-footer a, body[data-world] .chc-footer span, body[data-world] .chc-footer h4, body[data-world] .chc-footer p, body[data-world] .chc-footer li, body[data-world] .chc-footer svg, body[data-world] .chc-footer small,
body[data-world] .mobile-menu a, body[data-world] .is-white a, body[data-world] .is-white span, body[data-world] .is-white h2 {
  color: #FFFFFF !important; border-color: #FFFFFF !important;
}
.chc-nav a:hover, .chc-footer a:hover, .mobile-menu a:hover, .is-white a:hover,
body[data-world] .chc-nav a:hover, body[data-world] .chc-footer a:hover, body[data-world] .mobile-menu a:hover, body[data-world] .is-white a:hover { color: var(--p-green) !important; }
.chc-nav .dot, .chc-footer .dot, .is-white .dot, body[data-world] .chc-footer .dot { color: #FFFFFF !important; }

/* legal-seiten: inhalt weiß */
body.is-white, body.is-white h1, body.is-white h2, body.is-white h3, body.is-white h4, body.is-white p,
body.is-white li, body.is-white a, body.is-white span, body.is-white strong, body.is-white em,
body.is-white td, body.is-white th, body.is-white dt, body.is-white dd, body.is-white small,
body.is-white .eyebrow, body.is-white .lede, body.is-white .muted, body.is-white .display, body.is-white .page-title,
body.is-white label, body.is-white svg { color: #FFFFFF !important; }
body.is-white a:hover { color: var(--p-green) !important; }
body.is-white .card, body.is-white .cookie-card { border-color: #FFFFFF !important; }
body.is-white .dot { color: #FFFFFF !important; }

/* ============================================================
   final: alle inhalte weiß — schwarz als grund, grün nur als
   interaktions-akzent (hover, buttons, feature-band).
   ============================================================ */
:root, :root[data-dir="paper"], :root[data-dir="ink"], :root[data-dir="press"] {
  --page-text: #FFFFFF !important; --page-strong: #FFFFFF !important;
  --page-muted: #FFFFFF !important; --page-faint: #FFFFFF !important;
  --hairline: #FFFFFF !important; --hairline-strong: #FFFFFF !important;
  --card-text: #FFFFFF !important; --card-strong: #FFFFFF !important;
  --card-border: #FFFFFF !important; --nav-text: #FFFFFF !important; --nav-border: #FFFFFF !important;
  --av-ink: #FFFFFF !important; --av-line: #FFFFFF !important; --av-line-strong: #FFFFFF !important;
  --canvas-ink: 255,255,255 !important; --canvas-line: #FFFFFF !important;
}
body, body[data-world], body[data-world="cycling"], body[data-world="creating"], body[data-world="cooking"] { --world: #FFFFFF; color: #FFFFFF !important; }
body *:not(.feature):not(.feature *):not(.btn):not(.band-enter) { border-color: #FFFFFF !important; }
body h1, body h2, body h3, body h4, body h5, body p, body li, body span, body a, body label, body td, body th,
body dt, body dd, body small, body figcaption, body strong, body em, body svg,
body .display, body .page-title, body .lede, body .body, body .muted, body .eyebrow, body .dot,
body .folio-ch-title, body .folio-ch-desc, body .case-title, body .case-meta, body .case-num, body .case-link,
body .svc-card h3, body .svc-num, body .rcat-title, body .wtitle, body .world-num, body .marquee span,
body .tag, body .folio-cat-pill, body input, body textarea, body select { color: #FFFFFF !important; }
body a:hover, body .nav-links a:hover, body .nav-cta:hover, body .mobile-menu a:hover,
body .case-item:hover .case-link, body .world:hover .wtitle { color: var(--p-green) !important; }
body .case-link { border-bottom-color: #FFFFFF !important; }
body .case-item:hover .case-link { border-bottom-color: var(--p-green) !important; }
body input::placeholder, body textarea::placeholder { color: #FFFFFF !important; }
/* akzentflächen behalten schwarze type */
body .feature, body .feature * { color: #000000 !important; }
body .btn, body .btn--ink { background: var(--p-green) !important; border-color: var(--p-green) !important; color: #000000 !important; }
body .btn:hover, body .btn--ink:hover { background: #FFFFFF !important; border-color: #FFFFFF !important; color: #000000 !important; }
body .btn--ghost { background: transparent !important; color: #FFFFFF !important; border-color: #FFFFFF !important; }
body .btn--ghost:hover { color: var(--p-green) !important; border-color: var(--p-green) !important; }

/* startseite: keine linien */
body[data-page="home"] *, body[data-page="home"] *::before, body[data-page="home"] *::after {
  border-color: transparent !important;
}
body[data-page="home"] .chc-nav, body[data-page="home"] .hero, body[data-page="home"] .page-hero,
body[data-page="home"] .worlds, body[data-page="home"] .world, body[data-page="home"] .img-strip,
body[data-page="home"] .partner-row, body[data-page="home"] .chc-footer, body[data-page="home"] .footer-bar,
body[data-page="home"] .marquee, body[data-page="home"] .section {
  border: 0 !important;
}
body[data-page="home"] hr, body[data-page="home"] .hl, body[data-page="home"] .rule { display: none !important; }
body[data-page="home"] .btn, body[data-page="home"] .btn--ghost, body[data-page="home"] .band-enter { border-color: currentColor !important; }
body[data-page="home"] .btn, body[data-page="home"] .btn--ink { border-color: var(--p-green) !important; }

/* ---------- kacheln: weiß gefüllt, schwarze type ---------- */
body .card, body .svc-card, body .cookie-card, body .prod, body .jersey-arch, body .spice, body .logo-cell,
body .recipe-card, body .rcard, body .cf-card {
  background: #FFFFFF !important; border-color: #FFFFFF !important;
}
body .card, body .card *, body .svc-card, body .svc-card *, body .cookie-card, body .cookie-card *,
body .prod, body .prod *, body .jersey-arch, body .jersey-arch *, body .spice, body .spice *,
body .recipe-card, body .recipe-card *, body .rcard, body .rcard *, body .cf-card, body .cf-card * {
  color: #000000 !important; border-color: #000000 !important;
}
body .card a:hover, body .svc-card a:hover, body .prod a:hover, body .recipe-card a:hover { color: var(--p-green) !important; }
body .card .tag, body .prod .tag, body .recipe-card .tag { background: transparent !important; border-color: #000000 !important; color: #000000 !important; }
body .card .dot, body .svc-card .dot, body .prod .dot, body .recipe-card .dot { color: var(--p-green) !important; }
body .logo-cell { background: #FFFFFF !important; }
body .logo-cell img { filter: none !important; }
body .card .btn, body .svc-card .btn, body .prod .btn, body .recipe-card .btn { background: #000000 !important; border-color: #000000 !important; color: #FFFFFF !important; }
body .card .btn:hover, body .svc-card .btn:hover, body .prod .btn:hover, body .recipe-card .btn:hover { background: var(--p-green) !important; border-color: var(--p-green) !important; color: #000000 !important; }

/* ---------- keine linien mehr, site-weit ---------- */
body *, body *::before, body *::after { border-color: transparent !important; }
body hr, body .hl, body .rule { display: none !important; }
body .chc-nav, body .chc-footer, body .footer-bar, body .marquee, body .section, body .hero, body .page-hero,
body .worlds, body .world, body .img-strip, body .partner-row, body .case-item, body .folio-cat-head,
body .o-chap, body .svc-list li, body .cf-bar { border: 0 !important; }
/* kacheln bleiben durch die weiße fläche lesbar */
body .card, body .svc-card, body .cookie-card, body .prod, body .jersey-arch, body .spice, body .logo-cell,
body .recipe-card, body .rcard, body .cf-card { background: #FFFFFF !important; border: 0 !important; }
/* buttons brauchen kontur → fläche statt rahmen */
body .btn, body .btn--ink { background: var(--p-green) !important; color: #000 !important; border: 0 !important; }
body .btn:hover, body .btn--ink:hover { background: #FFFFFF !important; color: #000 !important; }
body .btn--ghost { background: #FFFFFF !important; color: #000000 !important; border: 0 !important; }
body .btn--ghost:hover { background: var(--p-green) !important; color: #000000 !important; }
body .tag, body .cf-chip { background: #FFFFFF !important; color: #000000 !important; border: 0 !important; }
body .band-enter { background: #000000 !important; color: var(--p-green) !important; border: 0 !important; }
/* eingabefelder: leichte fläche statt rahmen */
body input, body textarea, body select { background: #101010 !important; color: #FFFFFF !important; border: 0 !important; }
body input:focus, body textarea:focus, body select:focus { outline: 0 !important; background: #1a1a1a !important; }
/* links im fließtext ohne unterstrich-hairline, dafür grün beim hover */
body .case-link { border: 0 !important; }

/* ---------- lesbarkeit in weißen kacheln erzwingen (spezifisch genug) ---------- */
body .card h1, body .card h2, body .card h3, body .card h4, body .card p, body .card li, body .card span, body .card a, body .card small, body .card strong, body .card em, body .card svg,
body .svc-card h1, body .svc-card h2, body .svc-card h3, body .svc-card h4, body .svc-card p, body .svc-card li, body .svc-card span, body .svc-card a, body .svc-card .svc-num, body .svc-card .svc-list li, body .svc-card svg,
body .cookie-card h1, body .cookie-card h2, body .cookie-card h3, body .cookie-card h4, body .cookie-card p, body .cookie-card li, body .cookie-card span, body .cookie-card a, body .cookie-card label, body .cookie-card svg,
body .prod h3, body .prod h4, body .prod p, body .prod span, body .prod a, body .prod .tag, body .prod svg,
body .jersey-arch h3, body .jersey-arch p, body .jersey-arch span, body .jersey-arch a, body .jersey-arch svg,
body .spice h3, body .spice p, body .spice span, body .spice a,
body .recipe-card h3, body .recipe-card h4, body .recipe-card p, body .recipe-card li, body .recipe-card span, body .recipe-card a, body .recipe-card .tag, body .recipe-card svg,
body .rcard h3, body .rcard p, body .rcard span, body .rcard a,
body .cf-card h3, body .cf-card p, body .cf-card span, body .cf-card a {
  color: #000000 !important;
}
body .card .dot, body .svc-card .dot, body .prod .dot, body .recipe-card .dot, body .spice .dot, body .jersey-arch .dot { color: #2C5C1C !important; }
body .card a:hover, body .svc-card a:hover, body .prod a:hover, body .recipe-card a:hover, body .cookie-card a:hover { color: #2C5C1C !important; }
body .card .btn, body .svc-card .btn, body .prod .btn, body .recipe-card .btn, body .cookie-card .btn { background: #000000 !important; color: #FFFFFF !important; }
body .card .btn:hover, body .svc-card .btn:hover, body .prod .btn:hover, body .recipe-card .btn:hover, body .cookie-card .btn:hover { background: #2C5C1C !important; color: #FFFFFF !important; }
body .card .tag, body .prod .tag, body .recipe-card .tag { background: transparent !important; color: #000000 !important; }

/* ---------- kachel-typo schlägt jeden welt-/weiß-block (höchste spezifität) ---------- */
html body[data-world] .card h1,
html body .card h1,
html body[data-world] .card h2,
html body .card h2,
html body[data-world] .card h3,
html body .card h3,
html body[data-world] .card h4,
html body .card h4,
html body[data-world] .card p,
html body .card p,
html body[data-world] .card li,
html body .card li,
html body[data-world] .card span,
html body .card span,
html body[data-world] .card a,
html body .card a,
html body[data-world] .card small,
html body .card small,
html body[data-world] .card strong,
html body .card strong,
html body[data-world] .card em,
html body .card em,
html body[data-world] .card svg,
html body .card svg,
html body[data-world] .card .svc-num,
html body .card .svc-num,
html body[data-world] .card .svc-list li,
html body .card .svc-list li,
html body[data-world] .card label,
html body .card label,
html body[data-world] .svc-card h1,
html body .svc-card h1,
html body[data-world] .svc-card h2,
html body .svc-card h2,
html body[data-world] .svc-card h3,
html body .svc-card h3,
html body[data-world] .svc-card h4,
html body .svc-card h4,
html body[data-world] .svc-card p,
html body .svc-card p,
html body[data-world] .svc-card li,
html body .svc-card li,
html body[data-world] .svc-card span,
html body .svc-card span,
html body[data-world] .svc-card a,
html body .svc-card a,
html body[data-world] .svc-card small,
html body .svc-card small,
html body[data-world] .svc-card strong,
html body .svc-card strong,
html body[data-world] .svc-card em,
html body .svc-card em,
html body[data-world] .svc-card svg,
html body .svc-card svg,
html body[data-world] .svc-card .svc-num,
html body .svc-card .svc-num,
html body[data-world] .svc-card .svc-list li,
html body .svc-card .svc-list li,
html body[data-world] .svc-card label,
html body .svc-card label,
html body[data-world] .cookie-card h1,
html body .cookie-card h1,
html body[data-world] .cookie-card h2,
html body .cookie-card h2,
html body[data-world] .cookie-card h3,
html body .cookie-card h3,
html body[data-world] .cookie-card h4,
html body .cookie-card h4,
html body[data-world] .cookie-card p,
html body .cookie-card p,
html body[data-world] .cookie-card li,
html body .cookie-card li,
html body[data-world] .cookie-card span,
html body .cookie-card span,
html body[data-world] .cookie-card a,
html body .cookie-card a,
html body[data-world] .cookie-card small,
html body .cookie-card small,
html body[data-world] .cookie-card strong,
html body .cookie-card strong,
html body[data-world] .cookie-card em,
html body .cookie-card em,
html body[data-world] .cookie-card svg,
html body .cookie-card svg,
html body[data-world] .cookie-card .svc-num,
html body .cookie-card .svc-num,
html body[data-world] .cookie-card .svc-list li,
html body .cookie-card .svc-list li,
html body[data-world] .cookie-card label,
html body .cookie-card label,
html body[data-world] .prod h1,
html body .prod h1,
html body[data-world] .prod h2,
html body .prod h2,
html body[data-world] .prod h3,
html body .prod h3,
html body[data-world] .prod h4,
html body .prod h4,
html body[data-world] .prod p,
html body .prod p,
html body[data-world] .prod li,
html body .prod li,
html body[data-world] .prod span,
html body .prod span,
html body[data-world] .prod a,
html body .prod a,
html body[data-world] .prod small,
html body .prod small,
html body[data-world] .prod strong,
html body .prod strong,
html body[data-world] .prod em,
html body .prod em,
html body[data-world] .prod svg,
html body .prod svg,
html body[data-world] .prod .svc-num,
html body .prod .svc-num,
html body[data-world] .prod .svc-list li,
html body .prod .svc-list li,
html body[data-world] .prod label,
html body .prod label,
html body[data-world] .jersey-arch h1,
html body .jersey-arch h1,
html body[data-world] .jersey-arch h2,
html body .jersey-arch h2,
html body[data-world] .jersey-arch h3,
html body .jersey-arch h3,
html body[data-world] .jersey-arch h4,
html body .jersey-arch h4,
html body[data-world] .jersey-arch p,
html body .jersey-arch p,
html body[data-world] .jersey-arch li,
html body .jersey-arch li,
html body[data-world] .jersey-arch span,
html body .jersey-arch span,
html body[data-world] .jersey-arch a,
html body .jersey-arch a,
html body[data-world] .jersey-arch small,
html body .jersey-arch small,
html body[data-world] .jersey-arch strong,
html body .jersey-arch strong,
html body[data-world] .jersey-arch em,
html body .jersey-arch em,
html body[data-world] .jersey-arch svg,
html body .jersey-arch svg,
html body[data-world] .jersey-arch .svc-num,
html body .jersey-arch .svc-num,
html body[data-world] .jersey-arch .svc-list li,
html body .jersey-arch .svc-list li,
html body[data-world] .jersey-arch label,
html body .jersey-arch label,
html body[data-world] .spice h1,
html body .spice h1,
html body[data-world] .spice h2,
html body .spice h2,
html body[data-world] .spice h3,
html body .spice h3,
html body[data-world] .spice h4,
html body .spice h4,
html body[data-world] .spice p,
html body .spice p,
html body[data-world] .spice li,
html body .spice li,
html body[data-world] .spice span,
html body .spice span,
html body[data-world] .spice a,
html body .spice a,
html body[data-world] .spice small,
html body .spice small,
html body[data-world] .spice strong,
html body .spice strong,
html body[data-world] .spice em,
html body .spice em,
html body[data-world] .spice svg,
html body .spice svg,
html body[data-world] .spice .svc-num,
html body .spice .svc-num,
html body[data-world] .spice .svc-list li,
html body .spice .svc-list li,
html body[data-world] .spice label,
html body .spice label,
html body[data-world] .recipe-card h1,
html body .recipe-card h1,
html body[data-world] .recipe-card h2,
html body .recipe-card h2,
html body[data-world] .recipe-card h3,
html body .recipe-card h3,
html body[data-world] .recipe-card h4,
html body .recipe-card h4,
html body[data-world] .recipe-card p,
html body .recipe-card p,
html body[data-world] .recipe-card li,
html body .recipe-card li,
html body[data-world] .recipe-card span,
html body .recipe-card span,
html body[data-world] .recipe-card a,
html body .recipe-card a,
html body[data-world] .recipe-card small,
html body .recipe-card small,
html body[data-world] .recipe-card strong,
html body .recipe-card strong,
html body[data-world] .recipe-card em,
html body .recipe-card em,
html body[data-world] .recipe-card svg,
html body .recipe-card svg,
html body[data-world] .recipe-card .svc-num,
html body .recipe-card .svc-num,
html body[data-world] .recipe-card .svc-list li,
html body .recipe-card .svc-list li,
html body[data-world] .recipe-card label,
html body .recipe-card label,
html body[data-world] .rcard h1,
html body .rcard h1,
html body[data-world] .rcard h2,
html body .rcard h2,
html body[data-world] .rcard h3,
html body .rcard h3,
html body[data-world] .rcard h4,
html body .rcard h4,
html body[data-world] .rcard p,
html body .rcard p,
html body[data-world] .rcard li,
html body .rcard li,
html body[data-world] .rcard span,
html body .rcard span,
html body[data-world] .rcard a,
html body .rcard a,
html body[data-world] .rcard small,
html body .rcard small,
html body[data-world] .rcard strong,
html body .rcard strong,
html body[data-world] .rcard em,
html body .rcard em,
html body[data-world] .rcard svg,
html body .rcard svg,
html body[data-world] .rcard .svc-num,
html body .rcard .svc-num,
html body[data-world] .rcard .svc-list li,
html body .rcard .svc-list li,
html body[data-world] .rcard label,
html body .rcard label,
html body[data-world] .cf-card h1,
html body .cf-card h1,
html body[data-world] .cf-card h2,
html body .cf-card h2,
html body[data-world] .cf-card h3,
html body .cf-card h3,
html body[data-world] .cf-card h4,
html body .cf-card h4,
html body[data-world] .cf-card p,
html body .cf-card p,
html body[data-world] .cf-card li,
html body .cf-card li,
html body[data-world] .cf-card span,
html body .cf-card span,
html body[data-world] .cf-card a,
html body .cf-card a,
html body[data-world] .cf-card small,
html body .cf-card small,
html body[data-world] .cf-card strong,
html body .cf-card strong,
html body[data-world] .cf-card em,
html body .cf-card em,
html body[data-world] .cf-card svg,
html body .cf-card svg,
html body[data-world] .cf-card .svc-num,
html body .cf-card .svc-num,
html body[data-world] .cf-card .svc-list li,
html body .cf-card .svc-list li,
html body[data-world] .cf-card label,
html body .cf-card label { color: #000000 !important; }
html body[data-world] .card .dot, html body[data-world] .svc-card .dot, html body[data-world] .prod .dot,
html body[data-world] .recipe-card .dot, html body[data-world] .spice .dot, html body[data-world] .jersey-arch .dot { color: #2C5C1C !important; }
html body[data-world] .card a:hover, html body[data-world] .svc-card a:hover, html body[data-world] .prod a:hover,
html body[data-world] .recipe-card a:hover, html body[data-world] .cookie-card a:hover { color: #2C5C1C !important; }
html body[data-world] .card .btn, html body[data-world] .svc-card .btn, html body[data-world] .prod .btn,
html body[data-world] .recipe-card .btn, html body[data-world] .cookie-card .btn { background: #000000 !important; color: #FFFFFF !important; }

/* ============================================================
   final pass — kontrast überall
   regel: schwarze fläche → weiße schrift · weiße fläche → schwarze schrift
   ============================================================ */

/* 1) dekor-flächen mit fremdfarben auf schwarz zurücksetzen */
html body .world--icon, html body .world-ic, html body .cf-chip-ic,
html body .sec-chip, html body .gv-chip, html body .rc-chip, html body .art-icon, html body .art-wm {
  background: #000000 !important; background-image: none !important;
}
/* rezeptfoto bleibt sichtbar, nur die fläche darunter ist schwarz */
html body .rcard-art, html body .rr-hero { background-color: #000000 !important; }
html body .rcard-art::after, html body .rr-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 62%); pointer-events:none; }
html body .rcard-art > *, html body .rr-hero > * { position:relative; z-index:1 }
html body .rcard-art *, html body .rr-hero *, html body .world--icon *, html body .world-ic *,
html body .sec-chip *, html body .gv-chip *, html body .rc-chip *, html body .cf-chip-ic * { color: #FFFFFF !important; }
html body[data-dir] .world--icon .wtitle, html body .world--icon .wtitle, html body .world--icon .wline,
html body .world--icon .world-num, html body .world--icon .wgo, html body .world--icon .world-pillar { color: #FFFFFF !important; }
html body .world:hover .world-ic, html body .world--icon:hover .world-ic { background: #FFFFFF !important; color: #000000 !important; }
html body .world:hover .wgo, html body .world--icon:hover .wgo { background: #FFFFFF !important; color: #000000 !important; }
html body .world:hover .wgo *, html body .world--icon:hover .wgo * { color: #000000 !important; }

/* 2) bild-plates bleiben weiß (produktfotos) → overlay-schrift schwarz */
html body .prod-media, html body .jf-media, html body .ja-media, html body .spice-media { background: #FFFFFF !important; }
html body .prod-badge, html body .prod-badge *, html body .prod-badges, html body .prod-badges * { color: #000000 !important; background: transparent !important; }

/* 3) chips, pills, badges: fläche statt kontur */
html body .cf-chip, html body .cf-chip *, html body .sec-chip, html body .gv-chip, html body .rc-chip, html body .rc-chip *,
html body .cat-chips a, html body .section-jump a, html body .filter-bar button {
  background: #101010 !important; color: #FFFFFF !important;
}
html body .cf-chip[aria-pressed="true"], html body .cf-chip[aria-pressed="true"] *,
html body .filter-bar button[aria-pressed="true"], html body .gv-chip[aria-pressed="true"], html body .gv-chip.on {
  background: var(--p-green) !important; color: #000000 !important;
}
html body .cf-chip:hover, html body .sec-chip:hover, html body .gv-chip:hover,
html body .cat-chips a:hover, html body .section-jump a:hover { background: #FFFFFF !important; color: #000000 !important; }
html body .cf-chip:hover *, html body .sec-chip:hover *, html body .gv-chip:hover * { color: #000000 !important; }

/* 4) weiße kacheln: jede tiefe schwarz (inkl. dynamisch erzeugter teile) */
html body .card *, html body .svc-card *, html body .cookie-card *, html body .prod-body *, html body .ja-foot *,
html body .jf-body *, html body .spice-name, html body .rcard-body *, html body .recipe-card *, html body .rcard-go,
html body .rcard-name, html body .rcard-meta, html body .rcard-meta *, html body .prod-bullets *, html body .prod-features *,
html body .prod-titlerow *, html body .prod-links *, html body .prod-cmp-btn { color: #000000 !important; }
html body .prod-body .rc-chip, html body .rcard-body .rc-chip, html body .rcard-meta .rc-chip { background: #F0F0F0 !important; }
html body .prod-body .rc-chip *, html body .rcard-body .rc-chip *, html body .rcard-meta .rc-chip * { color: #000000 !important; }
html body .prod-cmp-btn { background: #000000 !important; color: #FFFFFF !important; }
html body .prod-cmp-btn:hover { background: var(--p-green) !important; color: #000000 !important; }
html body .rcard-body a:hover, html body .prod-links a:hover, html body .prod-go:hover { color: #2C5C1C !important; }

/* 5) icon-buttons brauchen ohne rahmen eine fläche */
html body .nav-toggle, html body .to-top, html body .back-to-top, html body .rr-step, html body .rr-print,
html body .rr-close, html body .lb-close, html body .lb-prev, html body .lb-next, html body .cf-clear, html body .gv-clear {
  background: #FFFFFF !important; color: #000000 !important;
}
html body .nav-toggle:hover, html body .to-top:hover, html body .rr-step:hover, html body .rr-print:hover,
html body .rr-close:hover, html body .lb-close:hover, html body .lb-prev:hover, html body .lb-next:hover,
html body .cf-clear:hover, html body .gv-clear:hover { background: var(--p-green) !important; color: #000000 !important; }
html body .nav-toggle span, html body .nav-toggle span::before, html body .nav-toggle span::after { background: #000000 !important; }

/* 6) modale panels auf schwarz */
html body .rr-panel, html body .rr-backdrop, html body .lightbox, html body .cmp-panel, html body .gv-panel { background: #000000 !important; }
html body .rr-panel *, html body .cmp-panel *, html body .gv-panel * { color: #FFFFFF !important; }
html body .rr-panel .rcard-art *, html body .rr-panel .rr-hero * { color: #FFFFFF !important; }
html body .rc-tip { background: #101010 !important; }
html body .rc-tip * { color: #FFFFFF !important; }

/* ============================================================
   kontrast-korrekturen (cooking)
   ============================================================ */
/* 1) rezeptkachel-kopf ist schwarz → alles darin weiß, höchste spezifität */
html body .rcard .rcard-art, html body .rcard .rcard-art span, html body .rcard .rcard-art svg,
html body .rcard .rcard-art .rcard-num, html body .rcard .rcard-art .rcard-cat,
html body .rcard .rcard-art .art-icon, html body .rcard .rcard-art .art-wm,
html body .rr-hero span, html body .rr-hero svg, html body .rr-hero .rcard-cat,
html body .rr-hero .art-icon, html body .rr-hero .art-wm { color: #FFFFFF !important; }
html body .rcard .rcard-art .rcard-new { background: var(--p-green) !important; color: #000000 !important; }

/* 2) rc-chip: dunkle fläche, weiße schrift — innen nie eigene fläche */
html body .rc-chip, html body .rcard .rc-chip, html body .rcard-meta .rc-chip,
html body .prod-body .rc-chip, html body .rr-panel .rc-chip { background: #101010 !important; }
html body .rc-chip span, html body .rc-chip svg, html body .rc-chip b, html body .rc-chip i,
html body .rcard .rc-chip span, html body .rcard .rc-chip svg, html body .rcard .rc-chip b,
html body .rcard-meta .rc-chip span, html body .rcard-meta .rc-chip svg, html body .rcard-meta .rc-chip b,
html body .prod-body .rc-chip span, html body .prod-body .rc-chip svg, html body .prod-body .rc-chip b {
  background: transparent !important; color: #FFFFFF !important;
}

/* 3) badges auf grüner fläche: schwarze schrift */
html body .lr-badge, html body .lr-badge * { background: var(--p-green) !important; color: #000000 !important; }

/* 4) deko-punkt in maskierten headlines nicht beschneiden */
html body .line-mask, html body .line-mask > * { overflow: visible !important; }

/* hover-zustände: chip komplett umfärben, keine restflächen innen */
html body .cf-chip:hover, html body .cf-chip:hover *, html body .cf-chip:hover .cf-chip-ic,
html body .sec-chip:hover, html body .sec-chip:hover *, html body .gv-chip:hover, html body .gv-chip:hover *,
html body .cat-chips a:hover, html body .cat-chips a:hover *, html body .section-jump a:hover, html body .section-jump a:hover * {
  background: transparent !important; color: #000000 !important;
}
html body .cf-chip:hover, html body .sec-chip:hover, html body .gv-chip:hover,
html body .cat-chips a:hover, html body .section-jump a:hover { background: #FFFFFF !important; }
html body .cf-chip[aria-pressed="true"], html body .cf-chip[aria-pressed="true"] *,
html body .cf-chip[aria-pressed="true"] .cf-chip-ic { background: transparent !important; color: #000000 !important; }
html body .cf-chip[aria-pressed="true"] { background: var(--p-green) !important; }
html body .cf-chip .cf-chip-ic, html body .cf-chip .cf-chip-ic * { background: transparent !important; color: inherit !important; }

/* text-buttons ohne rahmen brauchen sichtbare fläche + luft */
html body .band-enter, html body .wgo, html body .prod-go, html body .prod-mfr, html body .rcard-go {
  background: transparent !important; color: #FFFFFF !important;
}
html body .band-enter { background: #FFFFFF !important; color: #000000 !important; padding: 14px 24px !important; }
html body .band-enter * { color: #000000 !important; }
html body .band-enter:hover { background: var(--p-green) !important; }
html body .band-enter:hover * { color: #000000 !important; }

/* creating: case-panel als weiße, leicht transparente fläche */
html body .case-panel { background: rgba(255,255,255,.88) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html body .case-panel *, html body .case-panel .case-title, html body .case-panel .case-meta,
html body .case-panel .case-num, html body .case-panel .case-link { color: #000000 !important; }
html body .case-panel .dot { color: #2C5C1C !important; }
html body .case-item:hover .case-panel { background: rgba(255,255,255,.96) !important; }
html body .case-item:hover .case-link { color: #000000 !important; }

/* ============================================================
   cooking. — vollbild-rezeptbühnen (wie creating.)
   ============================================================ */
html body .recipe-cases { display: flex; flex-direction: column; gap: 0; }
html body .rcase {
  position: relative; display: block; width: 100%; height: min(78vh, 720px);
  padding: 0; margin: 0; border: 0; background: #000; overflow: hidden; cursor: pointer; text-align: left;
}
html body .rcase-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
html body .rcase:hover .rcase-img { transform: scale(1.035); }
html body .rcase-img--art { display: grid; place-items: center; background-size: cover; background-position: center; }
html body .rcase-img--art .art-wm { color: rgba(255,255,255,.14) !important; width: 40%; }
html body .rcase-panel {
  position: absolute; left: 0; bottom: 0; width: min(470px, 88%);
  background: rgba(255,255,255,.9) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 34px 38px 30px; display: flex; flex-direction: column; gap: 11px;
}
html body .rcase:nth-child(even) .rcase-panel { left: auto; right: 0; }
html body .rcase:hover .rcase-panel { background: rgba(255,255,255,.96) !important; }
html body .rcase-panel * { color: #000000 !important; }
html body .rcase-num { font-family: var(--font-condensed); font-size: .78rem; letter-spacing: .2em; color: #2C5C1C !important; }
html body .rcase-num i { font-style: normal; opacity: .5; }
html body .rcase-name { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 3rem); line-height: .98; letter-spacing: -.03em; }
html body .rcase-name .dot { color: #86CB58 !important; }
html body .rcase-meta { font-family: var(--font-condensed); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: #444 !important; }
html body .rcase-go { font-family: var(--font-condensed); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin-top: 4px; }
html body .rcase:hover .rcase-go { color: #2C5C1C !important; }
html body .rcase-go .arr { transition: transform .25s ease; display: inline-block; }
html body .rcase:hover .rcase-go .arr { transform: translateX(4px); }
html body .rcat { margin: 0; }
html body .rcat-head { padding: 74px 0 26px; }
html body .rcat-title { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); line-height: .9; letter-spacing: -.04em; }
@media (max-width: 760px){
  html body .rcase { height: auto; }
  html body .rcase-img { height: 62vw; min-height: 240px; }
  html body .rcase-panel { position: static; width: 100%; padding: 22px 20px 26px; -webkit-backdrop-filter: none; backdrop-filter: none; background: #FFFFFF !important; }
  html body .rcase:nth-child(even) .rcase-panel { right: auto; }
}

/* ============================================================
   REZEPT-READER: weißes blatt auf schwarz, foto ohne icon-overlay
   ============================================================ */
html body .rr-panel { background: #FFFFFF !important; }
html body .rr-panel *, html body .rr-scroll * { color: #000000 !important; }
html body .rr-hero .art-icon, html body .rr-hero .art-wm { display: none !important; }
html body .rr-panel .rr-hero, html body .rr-panel .rr-hero * { color: #FFFFFF !important; }
html body .rr-panel .rc-chip, html body .rr-panel .rc-chip * { background: #F1F1F1 !important; }
html body .rr-panel .rc-chip span, html body .rr-panel .rc-chip svg, html body .rr-panel .rc-chip b, html body .rr-panel .rc-chip i { background: transparent !important; color: #000000 !important; }
html body .rr-panel .rr-meta .rc-chip span, html body .rr-panel .rr-meta .rc-chip svg, html body .rr-panel .rr-meta .rc-chip b, html body .rr-panel .rr-meta .rc-chip i { color: #000000 !important; }
html body .rr-panel .rc-dot { background: #C9C9C9 !important; }
html body .rr-panel .rc-dot.on { background: #000000 !important; }
html body .rr-panel .rc-ic { background: #F1F1F1 !important; }
html body .rr-panel .rc-tip { background: #F1F1F1 !important; }
html body .rr-panel .rc-tip * { color: #000000 !important; }
html body .rr-panel .rc-steps li::before, html body .rr-panel .rc-steps li > b, html body .rr-panel .rr-num { color: #2C5C1C !important; }
html body .rr-panel .rc-ing li, html body .rr-panel .rr-ings .rc-ing li, html body .rr-panel .rr-ings-inner .rc-block .rc-ing li { border-color: rgba(0,0,0,.14) !important; border-bottom-color: rgba(0,0,0,.14) !important; }
html body .rr-panel .rr-calc { background: #F1F1F1 !important; border-color: rgba(0,0,0,.12) !important; }
html body .rr-panel .rr-step, html body .rr-panel .rr-close, html body .rr-panel .rr-print,
html body .rr-panel .rr-prev, html body .rr-panel .rr-next { background: #000000 !important; color: #FFFFFF !important; }
html body .rr-panel .rr-step *, html body .rr-panel .rr-close *, html body .rr-panel .rr-print *,
html body .rr-panel .rr-prev *, html body .rr-panel .rr-next * { color: #FFFFFF !important; }
html body .rr-panel .rr-step:hover, html body .rr-panel .rr-close:hover, html body .rr-panel .rr-print:hover,
html body .rr-panel .rr-prev:hover, html body .rr-panel .rr-next:hover { background: var(--p-green) !important; }
html body .rr-panel .rr-step:hover *, html body .rr-panel .rr-close:hover *, html body .rr-panel .rr-print:hover *,
html body .rr-panel .rr-prev:hover *, html body .rr-panel .rr-next:hover * { color: #000000 !important; }

/* ============================================================
   DRUCK: rezept auf weißem DIN-A4-blatt (überschreibt die schwarz-regeln)
   ============================================================ */
@media print {
  @page { size: A4; margin: 30mm; }
  html, html body { background: #FFFFFF !important; background-image: none !important; }
  html body > *:not(#recipe-print) { display: none !important; }
  html body #recipe-print { display: block !important; }
  /* layout kommt aus chc.css — hier nur alle farben auf schwarz/weiß neutralisieren */
  html body #recipe-print, html body #recipe-print * { background: transparent !important; background-image: none !important; color: #000000 !important; }
  html body #recipe-print .rp-head { border-bottom: 2pt solid #000000 !important; }
  html body #recipe-print .rp-brand .emblem, html body #recipe-print .rp-brand svg { color: #000000 !important; }
  html body #recipe-print .rp-ings .rc-ing li { border-bottom: .5pt solid rgba(0,0,0,.18) !important; }
  html body #recipe-print .rp-ings .rc-ic { background: #F2F2F2 !important; color: #000000 !important; }
  html body #recipe-print .rp-procs .rc-tip { background: #F4F4F4 !important; border-left: 2pt solid #000000 !important; }
  html body #recipe-print .rp-foot { border-top: .5pt solid rgba(0,0,0,.18) !important; color: #666666 !important; }
}

/* ============================================================
   CYCLING LAYOUT B — halber split: bild | weißes panel, reihen alternieren
   ============================================================ */
html body .prod-grid { display: flex !important; flex-direction: column !important; gap: 2px !important; grid-template-columns: none !important; }
html body .prod { display: grid !important; grid-template-columns: 1.15fr .85fr !important; align-items: stretch !important; height: 520px; min-height: 520px; overflow: hidden; border-radius: 0 !important; transform: none !important; }
html body .prod:nth-child(even) { grid-template-columns: .85fr 1.15fr !important; }
html body .prod:nth-child(even) .prod-media { order: 2; }
html body .prod-media { position: relative; display: grid; place-items: center; height: 100%; min-height: 300px; aspect-ratio: auto !important; padding: 0 !important; }
html body .prod-media img { width: 70% !important; height: 70% !important; max-width: 70% !important; max-height: 70% !important; aspect-ratio: auto !important; object-fit: contain !important; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
html body .prod:hover .prod-media img { transform: scale(1.03); }
html body .prod-badges { position: absolute; left: 0; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; padding: 12px; }
html body .prod-badge { background: rgba(255,255,255,.92) !important; padding: 5px 9px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
html body .prod-body { display: flex !important; flex-direction: column; justify-content: center; gap: 12px; padding: 44px 46px !important; background: #FFFFFF !important; overflow: hidden; }
html body .prod-titlerow h3 { font-size: clamp(1.35rem, 2.3vw, 2rem) !important; line-height: 1 !important; letter-spacing: -.03em; }
html body .prod-body p, html body .prod-bullets li { font-size: .88rem; line-height: 1.5; }
html body .prod-bullets { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; list-style: none; padding-left: 0; }
html body .prod-bullets li { position: relative; padding-left: 15px; }
html body .prod-bullets li::before { content: "\2022"; position: absolute; left: 0; top: 0; color: #000000 !important; }
html body .prod-features { min-height: 0; overflow-y: auto; }
html body .prod-bullets::-webkit-scrollbar, html body .prod-features::-webkit-scrollbar { width: 3px; }
html body .prod-bullets::-webkit-scrollbar-thumb, html body .prod-features::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); }
html body .prod-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 4px; }
@media (max-width: 900px){
  html body .prod, html body .prod:nth-child(even) { grid-template-columns: 1fr !important; height: auto; min-height: 0; }
  html body .prod:nth-child(even) .prod-media { order: 0; }
  html body .prod-media { min-height: 240px; aspect-ratio: 4/3 !important; }
  html body .prod-body { padding: 28px 24px !important; }
}

html body #bikes .prod { height: auto !important; min-height: 520px !important; }
html body #bikes .prod-bullets, html body #bikes .prod-features { overflow: visible !important; }
html body #bikes .prod-body { justify-content: flex-start; padding-top: 48px !important; padding-bottom: 48px !important; }

/* ============================================================
   START: drei welten als große bilder mit weißem panel (wie creating.)
   ============================================================ */
html body .hw-sec { padding-left: 0 !important; padding-right: 0 !important; }
html body .hw { display: flex; flex-direction: column; gap: 0; }
html body .hw-row { position: relative; display: block; height: min(74vh, 660px); overflow: hidden; text-decoration: none; cursor: pointer; }
html body .hw-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
html body .hw-row:hover .hw-img { transform: scale(1.03); }
html body .hw-panel { position: absolute; left: 0; bottom: 0; z-index: 2; width: min(470px, 88%); background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 34px 38px 30px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
html body .hw-row:nth-child(even) .hw-panel { left: auto; right: 0; }
html body .hw-row:hover .hw-panel { background: rgba(255,255,255,.85); }
html body .hw-panel * { color: #000000 !important; }
html body .hw-num { font-family: var(--font-condensed); font-size: .78rem; letter-spacing: .2em; color: #000000 !important; }
html body .hw-num i { font-style: normal; opacity: .5; }
html body .hw-title { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: .96; letter-spacing: -.035em; }
html body .hw-title .dot { color: #000000 !important; }
html body .hw-line { font-size: .92rem; line-height: 1.5; }
html body .hw-go { font-family: var(--font-condensed); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; margin-top: 6px; align-self: flex-start; background: #000000; color: #FFFFFF !important; padding: 10px 18px; transition: background .25s ease; }
html body .hw-row:hover .hw-go { background: #FFFFFF; color: #000000 !important; }
@media (max-width: 780px){
  html body .hw-row { height: auto; }
  html body .hw-img { position: static; height: 62vw; min-height: 240px; }
  html body .hw-panel, html body .hw-row:nth-child(even) .hw-panel { position: static; width: 100%; right: auto; padding: 22px 20px 26px; -webkit-backdrop-filter: none; backdrop-filter: none; background: #FFFFFF; }
}

/* startseite: strikt schwarz/weiß — nur die bilder tragen farbe */
html body[data-page="home"] .scroll-progress, html body[data-page="home"] .cursor-dot,
html body[data-page="home"] .page-curtain { background: #FFFFFF !important; }
html body[data-page="home"] .cursor-ring { border-color: #FFFFFF !important; }
html body[data-page="home"] .page-curtain { background: #000000 !important; }

/* ============================================================
   CYCLING FILTER — layout E: gruppenkarten
   ============================================================ */
html body[data-page="cycling"] .cf-row { display: grid !important; gap: 14px !important; align-items: start; }
html body[data-page="cycling"] .cf-search { max-width: 420px; background: #141414 !important; border: 0 !important; }
html body[data-page="cycling"] .cf-chips { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 2px !important; align-items: start; }
html body[data-page="cycling"] .cf-chips > .cf-chip[data-cat="all"] { grid-column: 1 / -1; justify-self: start; margin-bottom: 6px; }
html body[data-page="cycling"] .cf-group { background: #0D0D0D !important; padding: 16px 18px 18px; display: grid; gap: 9px; align-content: start; min-height: 128px; }
html body[data-page="cycling"] .cf-group:hover { background: #141414 !important; }
html body[data-page="cycling"] .cf-group--solo { align-content: center; }
html body[data-page="cycling"] .cf-group-label { font-family: var(--font-condensed); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: #7A7A7A !important; }
html body[data-page="cycling"] .cf-group-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html body[data-page="cycling"] .cf-chip { background: #1C1C1C !important; border: 0 !important; color: #FFFFFF !important; font-family: var(--font-condensed); font-size: .8rem; letter-spacing: .04em; padding: 8px 13px; }
html body[data-page="cycling"] .cf-group--solo .cf-chip { background: transparent !important; padding: 0; font-size: .95rem; text-align: left; }
html body[data-page="cycling"] .cf-chip:hover { background: #333333 !important; color: #FFFFFF !important; }
html body[data-page="cycling"] .cf-group--solo .cf-chip:hover { background: transparent !important; color: #FFFFFF !important; text-decoration: underline; text-underline-offset: 5px; }
html body[data-page="cycling"] .cf-chip[aria-pressed="true"] { background: #FFFFFF !important; color: #000000 !important; }
html body[data-page="cycling"] .cf-group--solo .cf-chip[aria-pressed="true"] { background: transparent !important; color: #FFFFFF !important; text-decoration: underline; text-underline-offset: 5px; }
html body[data-page="cycling"] .cf-chip-ic { display: none !important; }
@media (max-width: 1000px){ html body[data-page="cycling"] .cf-chips { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px){ html body[data-page="cycling"] .cf-chips { grid-template-columns: 1fr !important; } }

/* alle produktbilder vollständig sichtbar: nie über die plate hinaus */
html body .prod-media { padding: 26px !important; }
html body .prod-media img,
html body .prod-media img[src*="c2c10756-2ed8-421b-b31e-ba9415052610_4"],
html body .prod-media img[src*="8e78c454-1e67-42df-8fc8-d0ebc2bf5e5e_4"] { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; min-height: 0 !important; object-fit: contain !important; }

html body .prod-media img[src*="e058a3c0-0004-44f4-ad5a-5b8e718ff4f2_8"] { width: 70% !important; height: 70% !important; }

html body .prod-media img[src*="26508b34-676d-4121-9391-e8d30437b7ca"],
html body .prod-media img[src*="027d97c5-b970-4786-9c89-091c3b770311_4"] { width: 50% !important; height: 50% !important; }

/* cooking.: keine horizontalen linien im screen-layout (druck bleibt unberührt) */
html body[data-page="cooking"] .section, html body[data-page="cooking"] .section--alt,
html body[data-page="cooking"] .chc-nav, html body[data-page="cooking"] .chc-footer,
html body[data-page="cooking"] .rcase, html body[data-page="cooking"] .rcase-panel,
html body[data-page="cooking"] .cf-bar, html body[data-page="cooking"] .cf-row,
html body[data-page="cooking"] .cf-chip, html body[data-page="cooking"] .cf-search,
html body[data-page="cooking"] .stack, html body[data-page="cooking"] .container > *,
html body[data-page="cooking"] .rr-panel, html body[data-page="cooking"] .rr-tools,
html body[data-page="cooking"] .rr-meta, html body[data-page="cooking"] .rr-calc,
html body[data-page="cooking"] .rc-ing li, html body[data-page="cooking"] .rc-block,
html body[data-page="cooking"] .rc-steps li, html body[data-page="cooking"] .rc-tip,
html body[data-page="cooking"] .partner-row, html body[data-page="cooking"] .footer-top,
html body[data-page="cooking"] .footer-bottom, html body[data-page="cooking"] .rcat-head, html body[data-page="cooking"] hr {
  border-top: 0 !important; border-bottom: 0 !important;
}
html body[data-page="cooking"] hr { display: none !important; }
html body[data-page="cooking"] .section[data-screen-label="recipes"] { padding-top: var(--space-5) !important; }

html body .rcat-head, html body[data-dir="press"] .rcat-head { border-bottom: 0 !important; padding-bottom: 0 !important; }

/* web-cases: screenshots mit etwas luft nach oben (wie seven steigen) */
html body .case-item > img { object-position: center 8% !important; }
html body .case-item > img[src*="falkspricht-website"] { object-position: center 50% !important; }
html body .case-item > img[src*="gravelndar-website"] { object-position: center 35% !important; }
html body .case-item > img[src*="sugar-gravel-website"] { object-fit: cover !important; object-position: center 36% !important; }
html body .case-item > img[src*="ei-love-website"] { object-position: center 18% !important; }
html body .case-item > img[src*="alb-packa-website"] { object-position: center 20% !important; }
html body .case-item > img[src*="web-bohne-bremse"] { object-fit: cover !important; object-position: center 52% !important; transform: scale(1.43); }
html body .case-item > img[src*="web-superx"] { object-fit: cover !important; object-position: 54% 40% !important; transform: scale(1.2); }
html body .case-item:hover > img[src*="web-superx"] { transform: scale(1.25); }
html body .case-item:hover > img[src*="web-bohne-bremse"] { transform: scale(1.48); }
html body .case-item > img[src*="omw-sugar-website"] { transform: scale(1.44); }
html body .case-item:hover > img[src*="omw-sugar-website"] { transform: scale(1.49); }
html body .case-item > img[src*="scalpel-website"] { transform: scale(1.38) translate(8%, -8%); }
html body .case-item:hover > img[src*="scalpel-website"] { transform: scale(1.43) translate(8%, -8%); }
html body .case-item > img[src*="stayspiced-website"] { transform: scale(1.15) translateY(-10%); }
html body .case-item:hover > img[src*="stayspiced-website"] { transform: scale(1.19) translateY(-10%); }
html body .case-item > img[src*="fm-website"] { transform: scale(1.25) translateY(3%); }
html body .case-item:hover > img[src*="fm-website"] { transform: scale(1.29) translateY(3%); }
html body .case-item > img[src*="web-shun"] { transform: scale(1.87); }
html body .case-item:hover > img[src*="web-shun"] { transform: scale(1.93); }

/* web.: alle screenshots vollständig zeigen */
html body .folio-group[data-cat="web"] .case-item { aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; }
html body .folio-group[data-cat="web"] .case-item > img,
html body .folio-group[data-cat="web"] .case-item:hover > img { position: static !important; width: 100% !important; height: auto !important; object-fit: contain !important; object-position: center !important; transform: none !important; }

/* gewürze: dosen auf schwarz, beschriftung weiß */
html body .spice-media { background: #000000 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html body .spice:hover .spice-media { box-shadow: none !important; }
html body .spice, html body .spice-name, html body .spice-media img { background: transparent !important; box-shadow: none !important; border: 0 !important; }
html body .spice-name, html body .spice-card .spice-name, html body .spice .spice-name,
html body a.spice .spice-name, html body a.spice:hover .spice-name { color: #FFFFFF !important; }

/* logo doppelt so groß */
html body .nav-brand .emblem { width: 88px !important; height: 88px !important; }

/* startseite: erste bildreihe beginnt unter der fixierten navigation */
html body .hw { padding-top: 132px; }
@media (max-width: 720px){ html body .hw { padding-top: 96px; } }

html body .hw-row[href="creating.html"] .hw-img { object-position: center 30% !important; transform: scale(1.2) translate(-5%, 10%); }
html body .hw-row[href="creating.html"]:hover .hw-img { transform: scale(1.24) translate(-5%, 10%); }

/* mobil: logo kleiner, keine bild-transforms (sonst querüberlauf) */
@media (max-width: 780px){
  html body .nav-brand .emblem { width: 58px !important; height: 58px !important; }
  html body .hw-row[href="creating.html"] .hw-img,
  html body .hw-row[href="creating.html"]:hover .hw-img { transform: none !important; object-position: center 30% !important; }
  html body .case-item > img, html body .case-item:hover > img { transform: none !important; }
  html body .prod-media { padding: 16px !important; }
  html body #recipeList .rcat-head { padding-left: 20px !important; padding-right: 20px; }
  html body .rcat-title { font-size: clamp(2rem, 11vw, 3rem); }
}

/* rezeptliste läuft randlos, kategorie-titel behalten die container-kante */
html body #recipeList { width: 100%; }
html body #recipeList .rcat-head { padding-left: 0 !important; padding-right: 24px; }


/* ============================================================
   GLOBAL: gesamte website strikt schwarz/weiß — farbe nur in bildern
   ============================================================ */
:root, :root[data-dir="paper"], :root[data-dir="ink"], :root[data-dir="press"] {
  --p-green: #FFFFFF !important; --p-blue: #FFFFFF !important; --p-lav: #FFFFFF !important;
  --world: #FFFFFF !important; --canvas-ink: 255,255,255 !important;
}
html body .dot, html body .accent, html body .case-link, html body .marquee span,
html body .rcase-num, html body .rcard-cat, html body .hw-num, html body .hw-title .dot { color: #FFFFFF !important; }
/* auf weißen flächen wird der akzent schwarz statt dunkelgrün */
html body .rcase-panel .dot, html body .rcase-panel .rcase-num, html body .case-panel .dot,
html body .prod-body .dot, html body .rr-panel .dot, html body .rr-panel .rc-steps li::before,
html body .rr-panel .rc-steps li > b, html body .rr-panel .rr-num, html body .rc-block h4,
html body .rr-panel .rc-tip strong, html body .hw-panel .dot, html body .hw-panel .hw-num,
html body .band-enter:hover *, html body .feature * { color: #000000 !important; }
html body .rr-panel .rc-tip { border-left-color: #000000 !important; }
html body .feature { background: #FFFFFF !important; }
html body .btn, html body .btn--ink, html body .cf-chip[aria-pressed="true"] { background: #FFFFFF !important; border-color: #FFFFFF !important; color: #000000 !important; }
html body .btn:hover, html body .btn--ink:hover { background: #C9C9C9 !important; border-color: #C9C9C9 !important; color: #000000 !important; }
html body .scroll-progress, html body .cursor-dot { background: #FFFFFF !important; }
html body .cursor-ring { border-color: #FFFFFF !important; }
html body .page-curtain { background: #000000 !important; }
html body #recipe-print .rp-cat, html body #recipe-print .rc-block h4,
html body #recipe-print .rc-steps li::before, html body #recipe-print .rc-tip strong { color: #000000 !important; }


/* ---------- header: sichtbares hover-feedback (schwarz-weiß) ---------- */
html body .chc-nav .nav-links a { position: relative !important; transition: opacity .18s ease, color .18s ease !important; }
html body .chc-nav .nav-links a::after { content: "" !important; display: block !important; position: absolute !important; left: 12px !important; right: 12px !important; bottom: 1px !important; height: 1px !important; background: #FFFFFF !important; transform: scaleX(0) !important; transform-origin: left !important; transition: transform .26s cubic-bezier(.4,0,.2,1) !important; }
html body .chc-nav .nav-links a:hover::after, html body .chc-nav .nav-links a[aria-current="page"]::after { transform: scaleX(1) !important; }
html body .chc-nav .nav-links a:hover { opacity: 1 !important; }
html body .chc-nav .nav-links a:not(:hover) { opacity: .78 !important; }
html body .chc-nav .nav-links:hover a:not(:hover) { opacity: .5 !important; }
html body .chc-nav .nav-links a[aria-current="page"] { opacity: 1 !important; }