/*
 * SCB Club – Block-Visibility-Klassen.
 *
 * Mobile/Tablet/Desktop-Hide via Media-Queries (Vorbild ClubDesk
 * .cd-hide-small / .cd-hide-large). Auf Editor-Seite ebenfalls
 * aktiv, damit der Bearbeiter den Hide-Effekt sieht; im selektierten
 * Block wird er aber abgemildert dargestellt, damit man weiter
 * arbeiten kann.
 */

/* === Frontend + Editor: Hide nach Breakpoint === */
@media (max-width: 576px) {
	.scb-hide-mobile { display: none !important; }
}
@media (min-width: 577px) and (max-width: 992px) {
	.scb-hide-tablet { display: none !important; }
}
@media (min-width: 993px) {
	.scb-hide-desktop { display: none !important; }
}

/* === Cookie-Consent-Hide ===
   Ohne aktivem Consent-Plugin/Filter ist der Marker einfach unsichtbar.
   Die <html>-Klasse `scb-has-consent` wird gesetzt, sobald der User
   zugestimmt hat (per Consent-Plugin oder JS).
*/
html:not(.scb-has-consent) .scb-hide-without-consent { display: none !important; }

/* === Editor-Übersteuerung: ausgeblendete Blöcke sichtbar machen,
   aber visuell entkoppelt, damit man sie bearbeiten kann ===
   v0.64.0: Ab WP 7.1 ist der Post-Editor immer ein iframe – dort fehlt
   `.block-editor-page`; der iframe-Body trägt
   `.block-editor-iframe__body.editor-styles-wrapper` (zusätzliche Selektoren).
*/
.block-editor-page .editor-styles-wrapper .scb-hide-mobile,
.block-editor-page .editor-styles-wrapper .scb-hide-tablet,
.block-editor-page .editor-styles-wrapper .scb-hide-desktop,
.block-editor-page .editor-styles-wrapper .scb-hide-without-consent,
.block-editor-iframe__body.editor-styles-wrapper .scb-hide-mobile,
.block-editor-iframe__body.editor-styles-wrapper .scb-hide-tablet,
.block-editor-iframe__body.editor-styles-wrapper .scb-hide-desktop,
.block-editor-iframe__body.editor-styles-wrapper .scb-hide-without-consent {
	display: revert !important;
}
.block-editor-page .editor-styles-wrapper [class*="scb-hide-"]::before,
.block-editor-iframe__body.editor-styles-wrapper [class*="scb-hide-"]::before {
	content: "👁 " attr(class);
	display: block;
	font: 11px/1.4 monospace;
	color: #888;
	background: rgba(196, 33, 25, 0.06);
	border-left: 3px solid #C42119;
	padding: 4px 8px;
	margin: 0 0 4px;
}