/* ═══════════════════════════════════════════════════════════════════
   Candor Lumen — Per-Viewport Responsive Studio (v0.3.0)
   ───────────────────────────────────────────────────────────────────
   Eigene CSS-Vars (--candor-*), eigene Klassen-Konventionen.
   Komplett unabhängig von MUP. Inhalt:
     · Padding / Margin / Schrift / Farben pro Viewport
     · candor-hide-d / candor-hide-t / candor-hide-m  (Sichtbarkeit)
     · candor-shape-{d|t|m}-{shape}  (oval/hexagon/circle/diamond/blob/soft)
     · candor-fx-{d|t|m}-{effect}    (sparkle/glow/lightning/shimmer/pulse)
     · candor-align-{d|t|m}-{align}  (left/center/right)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v1.1.0 — Audit-Fixes:
   #2: Selektoren mit Doppelpunkt — verhindert Substring-Match
       von --candor-bg-t bei --candor-bg-Regel
   #5: Default-Regeln nur wenn die Var EXPLIZIT gesetzt ist (statt
       inherit-Fallback der Theme-Defaults überschreibt)
   ═══════════════════════════════════════════════════════════════════ */

/* ───────── DESKTOP (greift nur wenn Var gesetzt) ───────── */
.has-candor-resp[style*="--candor-pad-y:"]  { padding-top: var(--candor-pad-y); padding-bottom: var(--candor-pad-y); }
.has-candor-resp[style*="--candor-pad-x:"]  { padding-left: var(--candor-pad-x); padding-right: var(--candor-pad-x); }
.has-candor-resp[style*="--candor-marg-y:"] { margin-top: var(--candor-marg-y); margin-bottom: var(--candor-marg-y); }
.has-candor-resp[style*="--candor-font:"]   { font-size: var(--candor-font); }
.has-candor-resp[style*="--candor-bg:"]     { background-color: var(--candor-bg); }
.has-candor-resp[style*="--candor-fg:"]     { color: var(--candor-fg); }

/* ───────── TABLET (≤ 1024 px) ───────── */
@media (max-width: 1024px) {
  .has-candor-resp[style*="--candor-pad-y-t:"]  { padding-top: var(--candor-pad-y-t); padding-bottom: var(--candor-pad-y-t); }
  .has-candor-resp[style*="--candor-pad-x-t:"]  { padding-left: var(--candor-pad-x-t); padding-right: var(--candor-pad-x-t); }
  .has-candor-resp[style*="--candor-marg-y-t:"] { margin-top: var(--candor-marg-y-t); margin-bottom: var(--candor-marg-y-t); }
  .has-candor-resp[style*="--candor-font-t:"]   { font-size: var(--candor-font-t); }
  .has-candor-resp[style*="--candor-bg-t:"]     { background-color: var(--candor-bg-t) !important; }
  .has-candor-resp[style*="--candor-fg-t:"]     { color: var(--candor-fg-t) !important; }
}

/* ───────── MOBILE (≤ 640 px) ───────── */
@media (max-width: 640px) {
  .has-candor-resp[style*="--candor-pad-y-m:"]  { padding-top: var(--candor-pad-y-m); padding-bottom: var(--candor-pad-y-m); }
  .has-candor-resp[style*="--candor-pad-x-m:"]  { padding-left: var(--candor-pad-x-m); padding-right: var(--candor-pad-x-m); }
  .has-candor-resp[style*="--candor-marg-y-m:"] { margin-top: var(--candor-marg-y-m); margin-bottom: var(--candor-marg-y-m); }
  .has-candor-resp[style*="--candor-font-m:"]   { font-size: var(--candor-font-m); }
  .has-candor-resp[style*="--candor-bg-m:"]     { background-color: var(--candor-bg-m) !important; }
  .has-candor-resp[style*="--candor-fg-m:"]     { color: var(--candor-fg-m) !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   SICHTBARKEIT PRO VIEWPORT
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .candor-hide-d { display: none !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .candor-hide-t { display: none !important; }
}
@media (max-width: 640px) {
  .candor-hide-m { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   BILD-SHAPES PRO VIEWPORT
   ───────────────────────────────────────────────────────────────────
   Wirkt auf das Bild im Block — sucht das <img> oder den Cover-Layer.
   Schweben unabhängig: Desktop-Shape gilt erst >1024, Tablet 641-1024,
   Mobile ≤640. So kannst du wirklich oval-tablet + hexagon-mobile haben.
   ═══════════════════════════════════════════════════════════════════ */

/* Universal: Shape auf <img>, Cover-Background, Gallery-Items */
.candor-shape img,
.candor-shape .wp-block-cover__background,
.candor-shape .wp-block-cover__image-background {
  transition: clip-path 0.4s ease, border-radius 0.4s ease;
}

/* Helper-Mixin via Klasse-Prefix */
[class*="candor-shape-d-circle"]   img,
[class*="candor-shape-d-circle"]   .wp-block-cover__image-background { border-radius: 50% !important; aspect-ratio: 1 / 1; object-fit: cover; }
[class*="candor-shape-d-oval"]     img,
[class*="candor-shape-d-oval"]     .wp-block-cover__image-background { border-radius: 50% / 35% !important; }
[class*="candor-shape-d-hexagon"]  img,
[class*="candor-shape-d-hexagon"]  .wp-block-cover__image-background { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
[class*="candor-shape-d-diamond"]  img,
[class*="candor-shape-d-diamond"]  .wp-block-cover__image-background { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
[class*="candor-shape-d-soft"]     img,
[class*="candor-shape-d-soft"]     .wp-block-cover__image-background { border-radius: 24px !important; }
[class*="candor-shape-d-blob"]     img,
[class*="candor-shape-d-blob"]     .wp-block-cover__image-background { border-radius: 60% 40% 50% 50% / 50% 60% 40% 50% !important; }

@media (max-width: 1024px) {
  [class*="candor-shape-t-circle"]  img, [class*="candor-shape-t-circle"]  .wp-block-cover__image-background { border-radius: 50% !important; aspect-ratio: 1 / 1; object-fit: cover; clip-path: none; }
  [class*="candor-shape-t-oval"]    img, [class*="candor-shape-t-oval"]    .wp-block-cover__image-background { border-radius: 50% / 35% !important; clip-path: none; }
  [class*="candor-shape-t-hexagon"] img, [class*="candor-shape-t-hexagon"] .wp-block-cover__image-background { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); border-radius: 0 !important; }
  [class*="candor-shape-t-diamond"] img, [class*="candor-shape-t-diamond"] .wp-block-cover__image-background { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border-radius: 0 !important; }
  [class*="candor-shape-t-soft"]    img, [class*="candor-shape-t-soft"]    .wp-block-cover__image-background { border-radius: 18px !important; clip-path: none; }
  [class*="candor-shape-t-blob"]    img, [class*="candor-shape-t-blob"]    .wp-block-cover__image-background { border-radius: 60% 40% 50% 50% / 50% 60% 40% 50% !important; clip-path: none; }
}

@media (max-width: 640px) {
  [class*="candor-shape-m-circle"]  img, [class*="candor-shape-m-circle"]  .wp-block-cover__image-background { border-radius: 50% !important; aspect-ratio: 1 / 1; object-fit: cover; clip-path: none; }
  [class*="candor-shape-m-oval"]    img, [class*="candor-shape-m-oval"]    .wp-block-cover__image-background { border-radius: 50% / 35% !important; clip-path: none; }
  [class*="candor-shape-m-hexagon"] img, [class*="candor-shape-m-hexagon"] .wp-block-cover__image-background { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); border-radius: 0 !important; }
  [class*="candor-shape-m-diamond"] img, [class*="candor-shape-m-diamond"] .wp-block-cover__image-background { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border-radius: 0 !important; }
  [class*="candor-shape-m-soft"]    img, [class*="candor-shape-m-soft"]    .wp-block-cover__image-background { border-radius: 14px !important; clip-path: none; }
  [class*="candor-shape-m-blob"]    img, [class*="candor-shape-m-blob"]    .wp-block-cover__image-background { border-radius: 60% 40% 50% 50% / 50% 60% 40% 50% !important; clip-path: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   EFFEKTE PRO VIEWPORT
   ───────────────────────────────────────────────────────────────────
   Profi: gleicher Block hat Desktop-Sparkle, Mobile-Lightning etc.
   Setzt nur die Effekt-Klasse aktiv im jeweiligen Viewport. Die
   eigentlichen Animations-Keyframes laden aus dem MUP-Effects-CSS
   ODER aus Candor's eigenen Effekt-Definitionen (effects.php enqueue).
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   CANDOR EFFEKTE v2.3 — Layout-sicher, Shape-respektierend
   Garantie: Kein Effekt verändert display/position/size des Blocks.
   Alle Animationen laufen auf ::before Pseudo-Elementen.
   clip-path + border-radius via `inherit` → Glow leuchtet in korrekter Shape.
   ═══════════════════════════════════════════════════════════════════ */

[class*="candor-fx-"] {
  contain: layout style;
  position: relative;
}

[class*="candor-fx-d-"]::before,
[class*="candor-fx-t-"]::before,
[class*="candor-fx-m-"]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
  clip-path: inherit;
  will-change: opacity;
}

@keyframes cl-sparkle {
  0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; }
}
@keyframes cl-glow-box {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(201,168,76,0); }
  50%      { box-shadow: inset 0 0 48px 10px rgba(201,168,76,0.42); }
}
@keyframes cl-lightning {
  0%, 86%, 100% { opacity: 0; } 88%, 92% { opacity: 0.72; } 90% { opacity: 0.18; }
}
@keyframes cl-shimmer-sweep {
  0%   { transform: translateX(-130%) skewX(-12deg); }
  100% { transform: translateX(130%) skewX(-12deg); }
}
@keyframes cl-shimmer-text {
  0% { background-position: 200% center; } 100% { background-position: -200% center; }
}
@keyframes cl-pulse-glow {
  0%, 100% { opacity: 0.25; } 50% { opacity: 0.6; }
}
@keyframes cl-write {
  from { width: 0; } to { width: 100%; }
}
@keyframes cl-cinematic-in {
  0% { opacity: 0; letter-spacing: 0.45em; } 60% { opacity: 1; }
  100% { opacity: 1; letter-spacing: 0.12em; }
}

/* SPARKLE */
[class*="candor-fx-d-sparkle"]:not(.cl-fx-text)::before,
[class*="candor-fx-t-sparkle"]:not(.cl-fx-text)::before,
[class*="candor-fx-m-sparkle"]:not(.cl-fx-text)::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(255,215,0,0.32) 0%, transparent 68%);
  animation: cl-sparkle 2.8s ease-in-out infinite;
}
.cl-fx-text[class*="candor-fx-d-sparkle"] > *,
.cl-fx-text[class*="candor-fx-t-sparkle"] > *,
.cl-fx-text[class*="candor-fx-m-sparkle"] > * {
  animation: cl-sparkle 2.8s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(255,215,0,0.5), 0 0 20px rgba(255,215,0,0.25);
}

/* GLOW — respektiert border-radius + clip-path */
[class*="candor-fx-d-glow"]:not(.cl-fx-text)::before,
[class*="candor-fx-t-glow"]:not(.cl-fx-text)::before,
[class*="candor-fx-m-glow"]:not(.cl-fx-text)::before {
  animation: cl-glow-box 2.4s ease-in-out infinite;
}
.cl-fx-text[class*="candor-fx-d-glow"] > *,
.cl-fx-text[class*="candor-fx-t-glow"] > *,
.cl-fx-text[class*="candor-fx-m-glow"] > * {
  text-shadow: 0 0 12px rgba(201,168,76,0.72), 0 0 30px rgba(201,168,76,0.32);
}

/* LIGHTNING */
[class*="candor-fx-d-lightning"]::before,
[class*="candor-fx-t-lightning"]::before,
[class*="candor-fx-m-lightning"]::before {
  background: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(200,220,255,0.55) 50%, transparent 100%);
  animation: cl-lightning 3.8s ease-in-out infinite;
}

/* SHIMMER — Block-Overlay */
[class*="candor-fx-d-shimmer"]:not(.cl-fx-text)::before,
[class*="candor-fx-t-shimmer"]:not(.cl-fx-text)::before,
[class*="candor-fx-m-shimmer"]:not(.cl-fx-text)::before {
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,0.52) 50%, transparent 75%);
  width: 65%;
  overflow: hidden;
  animation: cl-shimmer-sweep 2.4s ease-in-out infinite;
}
/* SHIMMER — Text */
.cl-fx-text[class*="candor-fx-d-shimmer"] > *,
.cl-fx-text[class*="candor-fx-t-shimmer"] > *,
.cl-fx-text[class*="candor-fx-m-shimmer"] > * {
  background: linear-gradient(90deg, #c9a84c 0%, #fff5da 42%, #c9a84c 84%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: cl-shimmer-text 2.8s linear infinite;
}

/* PULSE */
[class*="candor-fx-d-pulse"]::before,
[class*="candor-fx-t-pulse"]::before,
[class*="candor-fx-m-pulse"]::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(201,168,76,0.38) 0%, transparent 62%);
  animation: cl-pulse-glow 2.6s ease-in-out infinite;
}

/* HANDSCHRIFT */
.cl-fx-text[class*="candor-fx-d-handschrift"] > *,
.cl-fx-text[class*="candor-fx-t-handschrift"] > *,
.cl-fx-text[class*="candor-fx-m-handschrift"] > * {
  font-family: "Brush Script MT", "Segoe Script", cursive;
  overflow: hidden; white-space: nowrap; display: block;
  width: 0;
  animation: cl-write 2.6s steps(38, end) forwards;
}

/* CINEMATIC */
.cl-fx-text[class*="candor-fx-d-cinematic"] > *,
.cl-fx-text[class*="candor-fx-t-cinematic"] > *,
.cl-fx-text[class*="candor-fx-m-cinematic"] > * {
  text-transform: uppercase; opacity: 0;
  animation: cl-cinematic-in 1.5s cubic-bezier(0.22,1,0.36,1) 0.12s forwards;
}

/* Viewport-Isolation */
@media (max-width: 1024px) {
  [class*="candor-fx-d-"]::before { display: none !important; }
  .cl-fx-text[class*="candor-fx-d-"] > * {
    animation: none !important; text-shadow: none !important;
    -webkit-text-fill-color: unset !important; color: unset !important; background: none !important;
  }
}
@media (min-width: 1025px), (max-width: 640px) {
  [class*="candor-fx-t-"]::before { display: none !important; }
  .cl-fx-text[class*="candor-fx-t-"] > * {
    animation: none !important; -webkit-text-fill-color: unset !important; background: none !important;
  }
}
@media (min-width: 641px) {
  [class*="candor-fx-m-"]::before { display: none !important; }
  .cl-fx-text[class*="candor-fx-m-"] > * {
    animation: none !important; -webkit-text-fill-color: unset !important; background: none !important;
  }
}

/* Reduced-Motion respektieren */
@media (prefers-reduced-motion: reduce) {
  [class*="candor-fx-"]::before { animation: none !important; }
  .cl-fx-text[class*="candor-fx-"] > * { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   ALIGNMENT PRO VIEWPORT
   ───────────────────────────────────────────────────────────────────
   v0.3.1: kaskadiert in alle Heading/Paragraph/Kadence-Children rein.
   Kadence Advanced Heading bringt eine eigene text-align mit, die hier
   überschrieben wird. Sonst bleibt der Header trotz „Mitte" links.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  [class*="candor-align-d-left"],
  [class*="candor-align-d-left"]   h1, [class*="candor-align-d-left"]   h2, [class*="candor-align-d-left"]   h3, [class*="candor-align-d-left"]   h4, [class*="candor-align-d-left"]   h5, [class*="candor-align-d-left"]   h6, [class*="candor-align-d-left"]   p, [class*="candor-align-d-left"]   .wp-block-heading, [class*="candor-align-d-left"]   .wp-block-paragraph, [class*="candor-align-d-left"]   .kt-adv-heading-wrap, [class*="candor-align-d-left"]   .kadence-advanced-heading-wrap, [class*="candor-align-d-left"]   .kb-adv-heading-wrap   { text-align: left !important; }
  [class*="candor-align-d-center"],
  [class*="candor-align-d-center"] h1, [class*="candor-align-d-center"] h2, [class*="candor-align-d-center"] h3, [class*="candor-align-d-center"] h4, [class*="candor-align-d-center"] h5, [class*="candor-align-d-center"] h6, [class*="candor-align-d-center"] p, [class*="candor-align-d-center"] .wp-block-heading, [class*="candor-align-d-center"] .wp-block-paragraph, [class*="candor-align-d-center"] .kt-adv-heading-wrap, [class*="candor-align-d-center"] .kadence-advanced-heading-wrap, [class*="candor-align-d-center"] .kb-adv-heading-wrap { text-align: center !important; }
  [class*="candor-align-d-right"],
  [class*="candor-align-d-right"]  h1, [class*="candor-align-d-right"]  h2, [class*="candor-align-d-right"]  h3, [class*="candor-align-d-right"]  h4, [class*="candor-align-d-right"]  h5, [class*="candor-align-d-right"]  h6, [class*="candor-align-d-right"]  p, [class*="candor-align-d-right"]  .wp-block-heading, [class*="candor-align-d-right"]  .wp-block-paragraph, [class*="candor-align-d-right"]  .kt-adv-heading-wrap, [class*="candor-align-d-right"]  .kadence-advanced-heading-wrap, [class*="candor-align-d-right"]  .kb-adv-heading-wrap  { text-align: right !important; }
}
@media (max-width: 1024px) {
  [class*="candor-align-t-left"],
  [class*="candor-align-t-left"]   h1, [class*="candor-align-t-left"]   h2, [class*="candor-align-t-left"]   h3, [class*="candor-align-t-left"]   h4, [class*="candor-align-t-left"]   h5, [class*="candor-align-t-left"]   h6, [class*="candor-align-t-left"]   p, [class*="candor-align-t-left"]   .wp-block-heading, [class*="candor-align-t-left"]   .wp-block-paragraph, [class*="candor-align-t-left"]   .kt-adv-heading-wrap, [class*="candor-align-t-left"]   .kadence-advanced-heading-wrap, [class*="candor-align-t-left"]   .kb-adv-heading-wrap   { text-align: left !important; }
  [class*="candor-align-t-center"],
  [class*="candor-align-t-center"] h1, [class*="candor-align-t-center"] h2, [class*="candor-align-t-center"] h3, [class*="candor-align-t-center"] h4, [class*="candor-align-t-center"] h5, [class*="candor-align-t-center"] h6, [class*="candor-align-t-center"] p, [class*="candor-align-t-center"] .wp-block-heading, [class*="candor-align-t-center"] .wp-block-paragraph, [class*="candor-align-t-center"] .kt-adv-heading-wrap, [class*="candor-align-t-center"] .kadence-advanced-heading-wrap, [class*="candor-align-t-center"] .kb-adv-heading-wrap { text-align: center !important; }
  [class*="candor-align-t-right"],
  [class*="candor-align-t-right"]  h1, [class*="candor-align-t-right"]  h2, [class*="candor-align-t-right"]  h3, [class*="candor-align-t-right"]  h4, [class*="candor-align-t-right"]  h5, [class*="candor-align-t-right"]  h6, [class*="candor-align-t-right"]  p, [class*="candor-align-t-right"]  .wp-block-heading, [class*="candor-align-t-right"]  .wp-block-paragraph, [class*="candor-align-t-right"]  .kt-adv-heading-wrap, [class*="candor-align-t-right"]  .kadence-advanced-heading-wrap, [class*="candor-align-t-right"]  .kb-adv-heading-wrap  { text-align: right !important; }
}
@media (max-width: 640px) {
  [class*="candor-align-m-left"],
  [class*="candor-align-m-left"]   h1, [class*="candor-align-m-left"]   h2, [class*="candor-align-m-left"]   h3, [class*="candor-align-m-left"]   h4, [class*="candor-align-m-left"]   h5, [class*="candor-align-m-left"]   h6, [class*="candor-align-m-left"]   p, [class*="candor-align-m-left"]   .wp-block-heading, [class*="candor-align-m-left"]   .wp-block-paragraph, [class*="candor-align-m-left"]   .kt-adv-heading-wrap, [class*="candor-align-m-left"]   .kadence-advanced-heading-wrap, [class*="candor-align-m-left"]   .kb-adv-heading-wrap   { text-align: left !important; }
  [class*="candor-align-m-center"],
  [class*="candor-align-m-center"] h1, [class*="candor-align-m-center"] h2, [class*="candor-align-m-center"] h3, [class*="candor-align-m-center"] h4, [class*="candor-align-m-center"] h5, [class*="candor-align-m-center"] h6, [class*="candor-align-m-center"] p, [class*="candor-align-m-center"] .wp-block-heading, [class*="candor-align-m-center"] .wp-block-paragraph, [class*="candor-align-m-center"] .kt-adv-heading-wrap, [class*="candor-align-m-center"] .kadence-advanced-heading-wrap, [class*="candor-align-m-center"] .kb-adv-heading-wrap { text-align: center !important; }
  [class*="candor-align-m-right"],
  [class*="candor-align-m-right"]  h1, [class*="candor-align-m-right"]  h2, [class*="candor-align-m-right"]  h3, [class*="candor-align-m-right"]  h4, [class*="candor-align-m-right"]  h5, [class*="candor-align-m-right"]  h6, [class*="candor-align-m-right"]  p, [class*="candor-align-m-right"]  .wp-block-heading, [class*="candor-align-m-right"]  .wp-block-paragraph, [class*="candor-align-m-right"]  .kt-adv-heading-wrap, [class*="candor-align-m-right"]  .kadence-advanced-heading-wrap, [class*="candor-align-m-right"]  .kb-adv-heading-wrap  { text-align: right !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   EDITOR-ONLY: Indikator-Badge wenn ein Block Candor-Werte hat
   ═══════════════════════════════════════════════════════════════════ */
body.block-editor-page .has-candor-resp {
  position: relative;
}
body.block-editor-page .has-candor-resp::before {
  content: "📐";
  position: absolute;
  top: -8px; left: -8px;
  background: #fbf4e2;
  border: 1px solid #c9a84c;
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
body.block-editor-page .has-candor-resp:hover::before,
body.block-editor-page .has-candor-resp.is-selected::before {
  opacity: 1;
}

/* Body-Indicator: welcher Device-Mode aktiv ist */
body[data-candor-device="t"]::after,
body[data-candor-device="m"]::after {
  content: attr(data-candor-device-label);
  position: fixed;
  bottom: 12px; right: 12px;
  background: linear-gradient(135deg, #c9a84c 0%, #a68838 100%);
  color: #fff;
  padding: 6px 14px;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 600;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
body[data-candor-device="t"]::after { content: "💻 Tablet-Modus"; }
body[data-candor-device="m"]::after { content: "📱 Smartphone-Modus"; }

/* ═══════════════════════════════════════════════════════════════════
   v0.3.1 — IMAGE-PRO PRO VIEWPORT
   ───────────────────────────────────────────────────────────────────
   Kette: Format (Aspect-Ratio) → Größe (Lange/Kurze Kante) →
   Fokuspunkt → Object-Fit. Bild bleibt verzerrungsfrei: wenn nur eine
   Kante gesetzt ist, übernimmt die andere automatisch das Format
   (height/width: auto).
   ═══════════════════════════════════════════════════════════════════ */

/* ── BILD-GRÖSSE (Lange / Kurze Kante) ── */
.has-candor-resp img,
.has-candor-resp .wp-block-image img {
  max-width:  var(--candor-img-long, none);
  max-height: var(--candor-img-short, none);
  height: auto;
  width:  auto;
  object-position: var(--candor-img-fx, 50%) var(--candor-img-fy, 50%);
}
/* v0.3.2: KEINE Defaults für Cover-min-height — sonst überschreiben wir
   MUP-Fullscreen-Sektion (100vh) oder Theme-Werte. Nur wenn der User
   explizit candor-img-h gesetzt hat, greifen wir ein. */
.has-candor-resp.wp-block-cover[style*="--candor-img-h"] {
  min-height: var(--candor-img-h) !important;
}
.has-candor-resp.wp-block-cover[style*="--candor-img-fx"] .wp-block-cover__image-background,
.has-candor-resp.wp-block-cover[style*="--candor-img-fx"] .wp-block-cover__video-background,
.has-candor-resp.wp-block-cover[style*="--candor-img-fy"] .wp-block-cover__image-background,
.has-candor-resp.wp-block-cover[style*="--candor-img-fy"] .wp-block-cover__video-background {
  object-position: var(--candor-img-fx, 50%) var(--candor-img-fy, 50%) !important;
}

@media (max-width: 1024px) {
  .has-candor-resp img,
  .has-candor-resp .wp-block-image img {
    max-width:  var(--candor-img-long-t, var(--candor-img-long, none));
    max-height: var(--candor-img-short-t, var(--candor-img-short, none));
  }
  .has-candor-resp[style*="--candor-img-fx-t"] img,
  .has-candor-resp[style*="--candor-img-fy-t"] img {
    object-position: var(--candor-img-fx-t, 50%) var(--candor-img-fy-t, 50%);
  }
  .has-candor-resp.wp-block-cover[style*="--candor-img-h-t"] {
    min-height: var(--candor-img-h-t) !important;
  }
  .has-candor-resp.wp-block-cover[style*="--candor-img-fx-t"] .wp-block-cover__image-background,
  .has-candor-resp.wp-block-cover[style*="--candor-img-fy-t"] .wp-block-cover__image-background {
    object-position: var(--candor-img-fx-t, 50%) var(--candor-img-fy-t, 50%) !important;
  }
}

@media (max-width: 640px) {
  .has-candor-resp img,
  .has-candor-resp .wp-block-image img {
    max-width:  var(--candor-img-long-m, var(--candor-img-long-t, var(--candor-img-long, none)));
    max-height: var(--candor-img-short-m, var(--candor-img-short-t, var(--candor-img-short, none)));
  }
  .has-candor-resp[style*="--candor-img-fx-m"] img,
  .has-candor-resp[style*="--candor-img-fy-m"] img {
    object-position: var(--candor-img-fx-m, 50%) var(--candor-img-fy-m, 50%);
  }
  .has-candor-resp.wp-block-cover[style*="--candor-img-h-m"] {
    min-height: var(--candor-img-h-m) !important;
  }
  .has-candor-resp.wp-block-cover[style*="--candor-img-fx-m"] .wp-block-cover__image-background,
  .has-candor-resp.wp-block-cover[style*="--candor-img-fy-m"] .wp-block-cover__image-background {
    object-position: var(--candor-img-fx-m, 50%) var(--candor-img-fy-m, 50%) !important;
  }
}

/* ── MAX-WIDTH ── */
.has-candor-resp { max-width: var(--candor-img-maxw, none); }
@media (max-width: 1024px) {
  .has-candor-resp { max-width: var(--candor-img-maxw-t, var(--candor-img-maxw, none)); }
}
@media (max-width: 640px) {
  .has-candor-resp { max-width: var(--candor-img-maxw-m, var(--candor-img-maxw-t, var(--candor-img-maxw, none))); }
}

/* ── ASPECT-RATIO PRO VIEWPORT ── */
/* Wirkt auf den Block-Container (Cover) ODER auf das innere <img> (Image) */
@media (min-width: 1025px) {
  [class*="candor-ar-d-16-9"]   img, [class*="candor-ar-d-16-9"].wp-block-cover   { aspect-ratio: 16 / 9;  }
  [class*="candor-ar-d-4-3"]    img, [class*="candor-ar-d-4-3"].wp-block-cover    { aspect-ratio: 4 / 3;   }
  [class*="candor-ar-d-3-2"]    img, [class*="candor-ar-d-3-2"].wp-block-cover    { aspect-ratio: 3 / 2;   }
  [class*="candor-ar-d-21-9"]   img, [class*="candor-ar-d-21-9"].wp-block-cover   { aspect-ratio: 21 / 9;  }
  [class*="candor-ar-d-1-1"]    img, [class*="candor-ar-d-1-1"].wp-block-cover    { aspect-ratio: 1 / 1;   }
  [class*="candor-ar-d-4-5"]    img, [class*="candor-ar-d-4-5"].wp-block-cover    { aspect-ratio: 4 / 5;   }
  [class*="candor-ar-d-3-4"]    img, [class*="candor-ar-d-3-4"].wp-block-cover    { aspect-ratio: 3 / 4;   }
  [class*="candor-ar-d-2-3"]    img, [class*="candor-ar-d-2-3"].wp-block-cover    { aspect-ratio: 2 / 3;   }
  [class*="candor-ar-d-9-16"]   img, [class*="candor-ar-d-9-16"].wp-block-cover   { aspect-ratio: 9 / 16;  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  [class*="candor-ar-t-16-9"]   img, [class*="candor-ar-t-16-9"].wp-block-cover   { aspect-ratio: 16 / 9;  }
  [class*="candor-ar-t-4-3"]    img, [class*="candor-ar-t-4-3"].wp-block-cover    { aspect-ratio: 4 / 3;   }
  [class*="candor-ar-t-3-2"]    img, [class*="candor-ar-t-3-2"].wp-block-cover    { aspect-ratio: 3 / 2;   }
  [class*="candor-ar-t-21-9"]   img, [class*="candor-ar-t-21-9"].wp-block-cover   { aspect-ratio: 21 / 9;  }
  [class*="candor-ar-t-1-1"]    img, [class*="candor-ar-t-1-1"].wp-block-cover    { aspect-ratio: 1 / 1;   }
  [class*="candor-ar-t-4-5"]    img, [class*="candor-ar-t-4-5"].wp-block-cover    { aspect-ratio: 4 / 5;   }
  [class*="candor-ar-t-3-4"]    img, [class*="candor-ar-t-3-4"].wp-block-cover    { aspect-ratio: 3 / 4;   }
  [class*="candor-ar-t-2-3"]    img, [class*="candor-ar-t-2-3"].wp-block-cover    { aspect-ratio: 2 / 3;   }
  [class*="candor-ar-t-9-16"]   img, [class*="candor-ar-t-9-16"].wp-block-cover   { aspect-ratio: 9 / 16;  }
}
@media (max-width: 640px) {
  [class*="candor-ar-m-16-9"]   img, [class*="candor-ar-m-16-9"].wp-block-cover   { aspect-ratio: 16 / 9;  }
  [class*="candor-ar-m-4-3"]    img, [class*="candor-ar-m-4-3"].wp-block-cover    { aspect-ratio: 4 / 3;   }
  [class*="candor-ar-m-3-2"]    img, [class*="candor-ar-m-3-2"].wp-block-cover    { aspect-ratio: 3 / 2;   }
  [class*="candor-ar-m-21-9"]   img, [class*="candor-ar-m-21-9"].wp-block-cover   { aspect-ratio: 21 / 9;  }
  [class*="candor-ar-m-1-1"]    img, [class*="candor-ar-m-1-1"].wp-block-cover    { aspect-ratio: 1 / 1;   }
  [class*="candor-ar-m-4-5"]    img, [class*="candor-ar-m-4-5"].wp-block-cover    { aspect-ratio: 4 / 5;   }
  [class*="candor-ar-m-3-4"]    img, [class*="candor-ar-m-3-4"].wp-block-cover    { aspect-ratio: 3 / 4;   }
  [class*="candor-ar-m-2-3"]    img, [class*="candor-ar-m-2-3"].wp-block-cover    { aspect-ratio: 2 / 3;   }
  [class*="candor-ar-m-9-16"]   img, [class*="candor-ar-m-9-16"].wp-block-cover   { aspect-ratio: 9 / 16;  }
}

/* ── OBJECT-FIT PRO VIEWPORT ── */
@media (min-width: 1025px) {
  [class*="candor-fit-d-cover"]      img, [class*="candor-fit-d-cover"]      .wp-block-cover__image-background { object-fit: cover !important; }
  [class*="candor-fit-d-contain"]    img, [class*="candor-fit-d-contain"]    .wp-block-cover__image-background { object-fit: contain !important; }
  [class*="candor-fit-d-fill"]       img, [class*="candor-fit-d-fill"]       .wp-block-cover__image-background { object-fit: fill !important; }
  [class*="candor-fit-d-scale-down"] img, [class*="candor-fit-d-scale-down"] .wp-block-cover__image-background { object-fit: scale-down !important; }
  [class*="candor-fit-d-none"]       img, [class*="candor-fit-d-none"]       .wp-block-cover__image-background { object-fit: none !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  [class*="candor-fit-t-cover"]      img, [class*="candor-fit-t-cover"]      .wp-block-cover__image-background { object-fit: cover !important; }
  [class*="candor-fit-t-contain"]    img, [class*="candor-fit-t-contain"]    .wp-block-cover__image-background { object-fit: contain !important; }
  [class*="candor-fit-t-fill"]       img, [class*="candor-fit-t-fill"]       .wp-block-cover__image-background { object-fit: fill !important; }
  [class*="candor-fit-t-scale-down"] img, [class*="candor-fit-t-scale-down"] .wp-block-cover__image-background { object-fit: scale-down !important; }
  [class*="candor-fit-t-none"]       img, [class*="candor-fit-t-none"]       .wp-block-cover__image-background { object-fit: none !important; }
}
@media (max-width: 640px) {
  [class*="candor-fit-m-cover"]      img, [class*="candor-fit-m-cover"]      .wp-block-cover__image-background { object-fit: cover !important; }
  [class*="candor-fit-m-contain"]    img, [class*="candor-fit-m-contain"]    .wp-block-cover__image-background { object-fit: contain !important; }
  [class*="candor-fit-m-fill"]       img, [class*="candor-fit-m-fill"]       .wp-block-cover__image-background { object-fit: fill !important; }
  [class*="candor-fit-m-scale-down"] img, [class*="candor-fit-m-scale-down"] .wp-block-cover__image-background { object-fit: scale-down !important; }
  [class*="candor-fit-m-none"]       img, [class*="candor-fit-m-none"]       .wp-block-cover__image-background { object-fit: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   v0.3.1 — EFFEKT-SHIFT-FIX
   ───────────────────────────────────────────────────────────────────
   Effekte (Sparkle/Glow/Pulse + auch MUP-Effekte) verschieben das
   Element nicht mehr. CSS-Containment + GPU-Compositing isoliert
   die Animation vom Dokumenten-Layout.
   ═══════════════════════════════════════════════════════════════════ */
/* v0.3.2: contain:paint entfernt — versteckte Sparkle-Partikel!
   Behalten nur GPU-Hints + will-change. Layout-Containment NICHT, weil
   das hindert overflow-Animationen wie Sparkle-Partikel.
   Sparkle bleibt sichtbar, Bild verschiebt sich nicht mehr. */
[class*="candor-fx-"][class*="-pulse"],
[class*="mup-fx-pulse"], .mup-fx-pulse {
  transform-origin: center;
  display: inline-block;
  will-change: transform;
}
[class*="candor-fx-"][class*="-shimmer"] {
  will-change: background-position;
}
[class*="candor-fx-"][class*="-glow"],
[class*="candor-fx-"][class*="-sparkle"] {
  will-change: filter, opacity;
}