/* ═══════════════════════════════════════════════════════════════ CENSOR SYSTEM — legt mattierte „Frosted"-Flecken über Blüten (Buds) Gegenstück zum Bloom-System, gleiche Koordinaten-Logik. Verwendung:

x/y/r in % der Stage. JS: censor.js (scannt automatisch). Globaler Schalter: → alles abgedeckt Einzeln aufdecken: Stage bekommt .revealed (per Klick) ═══════════════════════════════════════════════════════════════ */ .censor-stage { position: relative; isolation: isolate; } /* Overlay-Ebene über dem Bild (und über einem evtl. Bloom-Layer z3) */ .censor-layer { position: absolute; inset: 0; z-index: 6; opacity: 1; transition: opacity 0.4s ease; } /* Schalter aus ODER einzeln aufgedeckt → Ebene weg */ body:not(.censor-on) .censor-layer, .censor-stage.revealed .censor-layer { opacity: 0; visibility: hidden; pointer-events: none; } /* der eigentliche Zensur-Fleck: nur Blur (geblurtes Bild-Duplikat im Kreis) */ .censor-spot { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer; overflow: hidden; } .censor-spot__img { position: absolute; max-width: none; object-fit: cover; filter: blur(var(--cb, 16px)); pointer-events: none; user-select: none; } /* Vollflächen-Variante (z. B. Album-Cover, die ganz Cannabis-Grafik sind) */ .censor-spot--full { left: 0; top: 0; width: 100%; height: 100%; transform: none; aspect-ratio: auto; border-radius: inherit; } /* kleiner Hinweis-Chip pro Stage */ .censor-chip { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 7; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 50px; cursor: pointer; white-space: nowrap; background: rgba(36, 31, 24, 0.62); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-family: var(--font-head, sans-serif); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; transition: background 0.25s ease; } .censor-chip:hover { background: var(--green-deep, #134f25); } .censor-chip i { font-size: 0.72rem; color: var(--gold, #e0a015); } body:not(.censor-on) .censor-chip, .censor-stage.revealed .censor-chip { display: none; } /* kleiner „wieder ausblenden"-Knopf, wenn aufgedeckt */ .censor-rehide { position: absolute; top: 9px; right: 9px; z-index: 7; width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; background: rgba(36, 31, 24, 0.6); color: #fff; font-size: 0.66rem; display: none; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background 0.25s ease; } .censor-rehide:hover { background: var(--red, #c0392b); } body.censor-on .censor-stage.revealed .censor-rehide { display: flex; } /* Floating-Schalter unten rechts */ .censor-toggle { position: fixed; right: 22px; bottom: 22px; z-index: 400; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 50px; border: 1px solid rgba(36, 31, 24, 0.12); background: rgba(252, 248, 239, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 12px 30px -14px rgba(36, 31, 24, 0.55); cursor: pointer; font-family: var(--font-head, sans-serif); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink, #241f18); transition: transform 0.25s ease, border-color 0.25s ease; } .censor-toggle:hover { transform: translateY(-2px); border-color: var(--green, #1f7a36); } .censor-toggle i { color: var(--green, #1f7a36); font-size: 0.95rem; } .censor-toggle__state { font-size: 0.68rem; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 50px; background: #efe5d1; color: #8a8073; } body.censor-on .censor-toggle__state { background: var(--green, #1f7a36); color: #fff; } @media (max-width: 720px) { .censor-toggle { right: 14px; bottom: 14px; padding: 10px 14px; font-size: 0.72rem; } .censor-chip { font-size: 0.56rem; padding: 4px 9px; } } @media (prefers-reduced-motion: reduce) { .censor-layer { transition: none; } }