/*
 * LUI Ads – Farben über die Preset-Variablen aus theme.json, damit Hell- und
 * Dunkelmodus des Themes automatisch mitgehen. Fallbacks = helle Werte.
 */
/* "aside.lui-ad" statt ".lui-ad": Die Abstandsregeln der Block-Layouts
   ("…is-layout-flow > * + *", aus theme.json blockGap) haben dieselbe
   Spezifität (0,1,0) und stehen im <head> NACH dieser Datei – mit einfachem
   Klassenselektor gewann daher der Block-Gap (gemessen: 18 px oben, 0 unten
   statt der gewünschten 3 rem). Das Element ist immer ein <aside>
   (siehe render.php), der Typselektor kostet also nichts. */
aside.lui-ad {
	clear: both;
	margin-block: var(--wp--preset--spacing--50, 3rem);
	padding-block: 0.5rem 0.75rem;
	border-block: 1px solid var(--wp--preset--color--line, #e3e1dd);
	text-align: center;
}

/* Nie breiter als die umgebende Spalte (ohne overflow:hidden – Anzeigen
   abzuschneiden verbietet AdSense). */
.lui-ad,
.lui-ad ins.adsbygoogle {
	max-width: 100%;
	min-width: 0;
}

/* Die gelieferte Anzeige ist oft schmaler als der reservierte Platz (z. B.
   300x250 in einer 350 px breiten Spalte) und nach einer Drehung des Geräts
   bleibt die beim Laden gemessene Pixelbreite stehen. Ohne auto-Ränder klebt
   sie dann links statt mittig – text-align greift bei einem Block nicht. */
.lui-ad ins.adsbygoogle {
	margin-inline: auto;
}

/* Reservierte Höhe ------------------------------------------------------------
   Gegen Layout-Springen muss der Platz schon beim ersten Zeichnen stehen,
   also per CSS und nicht per Skript. render.php liefert beide Höhen als
   Custom Properties am <aside> (aus den eingestellten Formaten), hier wird
   entschieden, welche gilt.

   ACHTUNG: Die 479 px sind dieselbe Schwelle wie LUI_ADS_NARROW_MAX in
   includes/settings.php, mit der das Inline-Skript das Format auswählt.
   Beide gehören zusammen – ändert sich eine, muss die andere mit. */
.lui-ad ins.adsbygoogle,
.lui-ad__preview {
	min-height: var(--lui-ad-mh, 0px);
}

/* Handy hochkant: die schmale Variante. */
@media ( max-width: 479px ) {
	.lui-ad ins.adsbygoogle,
	.lui-ad__preview {
		min-height: var(--lui-ad-mh-narrow, var(--lui-ad-mh, 0px));
	}
}

/* Wo die Spalte für die größte Anzeige des Formats zu schmal ist, bliebe
   darunter eine leere Fläche stehen. Die Regeln hängen an der Formatklasse,
   nicht am Platz: Nur Rechteck-Formate werden mit der Spaltenbreite kleiner –
   ein Hochformat (300x600) passt auch in eine schmale Spalte, ein Querformat
   reserviert ohnehin nur 100 px. Unterhalb von 480 px gilt das schmale Format
   (Klasse …--fmtn-…), darüber das breite (…--fmt-…); die Bereiche hier liegen
   komplett auf je einer Seite der Schwelle. Die doppelte Klasse .lui-ad am
   Anfang hebt nur die Spezifität über die Grundregel oben.

   Grenzwerte gemessen (Chromium, Theme „Linux und Ich“): Artikelspalte
   ≥ 336 px ab 376 px Displaybreite; Sidebar 206 px bei 782 px, 250 px bei
   939 px, 338 px bei 1.249 px. Die Umschaltpunkte liegen bewusst ein paar
   Pixel VOR der gemessenen Grenze: Zu viel zu reservieren kostet nur etwas
   leere Fläche, zu wenig lässt die Seite beim Laden springen. */
@media ( max-width: 375px ) {
	.lui-ad.lui-ad--fmtn-rectangle ins.adsbygoogle,
	.lui-ad.lui-ad--fmtn-rectangle-horizontal ins.adsbygoogle {
		min-height: 250px;
	}
}

/* Sidebar, Smartphone quer bis kleines Tablet: Spalte 206–248 px → 200x200. */
@media ( min-width: 782px ) and ( max-width: 930px ) {
	.lui-ad--sidebar.lui-ad--fmt-rectangle ins.adsbygoogle,
	.lui-ad--sidebar.lui-ad--fmt-rectangle-horizontal ins.adsbygoogle {
		min-height: 200px;
	}
}

/* Sidebar bis zur vollen Breite der Zwei-Spalten-Box: 245–335 px → 250x250. */
@media ( min-width: 931px ) and ( max-width: 1239px ) {
	.lui-ad--sidebar.lui-ad--fmt-rectangle ins.adsbygoogle,
	.lui-ad--sidebar.lui-ad--fmt-rectangle-horizontal ins.adsbygoogle {
		min-height: 250px;
	}
}

.lui-ad__label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--muted, #63625f);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Kein Füllmaterial von Google: reservierten Platz wieder freigeben.
   Reine CSS-Absicherung für den Fall, dass lui-ads-fallback.js nicht läuft;
   den Regelfall (auch Adblocker) erledigt das Skript über .lui-ad--empty. */
.lui-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
	display: none;
}

/* Vom Skript gesetzt, sobald feststeht, dass an diesem Platz nichts kommt:
   Kennzeichnung, Rahmen und reservierte Höhe verschwinden mit. */
.lui-ad--empty {
	display: none;
}

/* C – Sidebar: bleibt beim Scrollen sichtbar. Unterhalb der Zwei-Spalten-
   Breite des Themes rutscht die Sidebar unter den Artikel; dort wäre der
   Platz nur eine weitere Anzeige am Seitenende – daher ausgeblendet
   (AdSense erlaubt display:none für responsives Design, die Anzeige wird
   dann gar nicht angefordert). */
/* C – Sidebar: Anzeige + „Blog unterstützen“-Kasten in EINER stickyen Hülle
   (siehe lui-ads-sticky.js). Der Kasten verliert darin sein eigenes sticky –
   sonst wären es wieder zwei unabhängig klebende Elemente, die sich am
   Sidebar-Ende überlappen. top setzt das Skript so, dass die Hülle am unteren
   Bildschirmrand andockt; bis dahin (und ohne JS) scrollt sie normal mit. */
/* Flex-Spalte statt Abständen über "> * + *": Ein ausgeblendetes Kind (die
   Anzeige unterhalb von 782 px, ein leerer Platz, der versteckte Hinweis)
   zählt bei "+" mit und hinterließ einen Abstand ohne Inhalt – gap überspringt
   display:none dagegen komplett. */
.lui-ad-stack {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40, 2rem);
	position: sticky;
	top: var(--lui-ads-stack-top, auto);
}

.lui-ad-stack.lui-ad-stack--static {
	position: static;
}

/* Sticky wirkt nur innerhalb des Eltern-Containers (.lui-sidebar). Ältere
   Theme-Versionen strecken die Sidebar per height:100% auf Artikelhöhe; das
   griff in Beiträgen nicht (gemessen: Spalte 8.911 px, Sidebar darin
   1.842 px). Flexbox statt Prozenthöhen streckt zuverlässig. Ab Theme-Stand
   19.09.2026 macht custom.css das selbst – diese Regeln sind dann doppelt,
   aber harmlos. Nur aktiv, wenn die Anzeigen-Hülle vorhanden ist. */
@media (min-width: 782px) {
	.lui-sidebar-col:has(.lui-ad-stack) {
		display: flex;
		flex-direction: column;
	}

	.lui-sidebar-col:has(.lui-ad-stack) > .wp-block-template-part {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
	}

	.lui-sidebar-col:has(.lui-ad-stack) > .wp-block-template-part > .lui-sidebar {
		flex: 1 1 auto;
	}
}

/* relative statt static: Der Kasten soll in der Hülle nicht selbst kleben,
   braucht aber einen positionierten Rahmen – das Daumen-hoch-Wasserzeichen
   des Themes (::after, position:absolute) saß mit static außerhalb des
   Kastens und war unsichtbar (bemerkt 2026-09-30). top:auto ist Pflicht:
   Das Theme setzt per JS "top: var(--lui-support-box-top)" (für sein
   eigenes Sticky ohne Hülle, z. B. 493px). Unter static wirkungslos,
   verschiebt es unter relative den Kasten um genau diesen Wert aus der
   Hülle heraus (1.5.2, sofort bemerkt). */
.lui-ad-stack > .lui-sidebar-support-box {
	position: relative;
	top: auto;
}

/* Das Theme gestaltet Sidebar-Kästen über „.lui-sidebar > .wp-block-group“,
   also nur direkte Kinder der Sidebar. In der Hülle ist der Kasten kein
   direktes Kind mehr – dieselben Regeln hier noch einmal (Werte wie im
   Theme, custom.css „Sidebar-Widgetbereiche“). */
.lui-sidebar .lui-ad-stack > .wp-block-group {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--base-2);
}

.lui-sidebar .lui-ad-stack > .wp-block-group.has-accent-background-color {
	border-color: var(--wp--preset--color--accent-dark);
}

aside.lui-ad--sidebar {
	margin-block: 0;
	border-block: 0;
	padding-block: 0;
}

/* Unterhalb der Zwei-Spalten-Breite des Themes rutscht die Sidebar unter den
   Artikel und der Kasten ist dort ohnehin nicht sticky (Theme-CSS). Die
   Anzeige wäre nur eine weitere Anzeige am Seitenende – ausgeblendet
   (AdSense erlaubt display:none für responsives Design, die Anzeige wird
   dann gar nicht angefordert). */
@media (max-width: 781px) {
	.lui-ad-stack {
		position: static;
	}

	.lui-ad--sidebar {
		display: none;
	}
}

.lui-ad__preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	border: 2px dashed var(--wp--preset--color--accent, #ff6600);
	color: var(--wp--preset--color--muted, #63625f);
	font-size: 0.9rem;
}

/* Hinweis statt Anzeige in der Sidebar --------------------------------------
   Erscheint nur, wenn Googles Skript gar nicht erst geladen werden konnte –
   also bei einem Adblocker, nicht bei einer bloß nicht gefüllten Anzeige
   (siehe lui-ads-fallback.js). Aussehen wie die Sidebar-Kästen des Themes,
   nur mit Akzentrahmen statt Trennlinie.

   Bewusst ohne "ad", "ads", "werbung" oder "anzeige" im Klassennamen und
   ohne id: Listen wie EasyList Germany blenden solche Elemente kosmetisch
   aus – der Hinweis wäre sonst genau dort weg, wo er gebraucht wird. */
.lui-sidebar-note {
	border: 1px solid var(--wp--preset--color--accent, #ff6600);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--30, 1.5rem);
	background: var(--wp--preset--color--base-2, #f5f4f2);
}

/* Der Hinweis steckt in der Flex-Hülle; [hidden] allein (UA-Stylesheet)
   würde von jeder display-Regel überstimmt. */
.lui-sidebar-note[hidden] {
	display: none !important;
}

.lui-sidebar-note > * + * {
	margin-block-start: 0.75em;
}

.lui-sidebar-note p {
	font-size: 0.95em;
}

.lui-sidebar-note__preview {
	color: var(--wp--preset--color--muted, #63625f);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Wasserzeichen: durchgestrichene Hand im Achteck ---------------------------
   Greift dieselbe Gestaltung auf wie der "Zuletzt auf Mastodon"-Kasten des
   Themes (gleiche Größe, gleicher Anschnitt, gleiche Position) – die beiden
   stehen in derselben Sidebar untereinander und sollen wie ein Paar wirken,
   nicht wie zwei Einzelfälle. Nur die Deckkraft ist höher als dort (0.18
   statt 0.12): Das Orange liest sich bei gleicher Deckkraft deutlich
   schwächer als das Grau des Mastodon-Logos, gleiche Zahl ergäbe also
   gerade KEIN gleiches Gewicht.

   Rechts unten angeschnitten statt mittig: Eine vollständig sichtbare, mittige
   Marke liest sich als Inhalt, eine angeschnittene als Hintergrund.

   Akzentfarbe statt des Rot der Vorlage: Der Kasten trägt seine Akzentfarbe
   schon im Rahmen, und ein zweiter, fremder Signalton daneben führt die Optik
   der Seite vor. Eingefärbt per mask statt als fertige Grafik, damit
   background-color die Farbe bestimmt – der Dunkelmodus kommt so von allein
   über dieselbe Custom Property.

   Vorlage ist AdBlock-Logo.wine.svg. Zwei Eingriffe waren nötig:

   1. Achteck und Hand stecken hier in EINEM Pfad mit fill-rule:evenodd, damit
      die Hand ein Loch im Achteck ist statt einer zweiten Fläche darüber:
      Eine Maske kennt nur "deckt ab" oder "deckt nicht ab", zwei
      übereinanderliegende Flächen ergäben darin ein volles Achteck. Der
      Teilpfad der Hand beginnt dafür mit absolutem M – als relatives m (so
      steht es in der Quelldatei) bezöge er sich nach dem z des Achtecks auf
      dessen Startpunkt und säße verschoben.
   2. Die viewBox ist eine andere als in der Quelldatei. Deren eigene
      ("-42.184155 -19.7536 79.012301 38.423254") ist nur halb so hoch wie die
      Grafik und schneidet sie auf einen waagerechten Streifen zu – im Browser
      als Maske nachgestellt und gesehen. Hier steht der tatsächliche
      Umriss der Grafik.

   isolation:isolate + z-index:-1 statt einer z-index-Regel auf den Kindern:
   Der Kasten bekommt damit einen eigenen Stapelkontext, in dem das
   Pseudo-Element zwar hinter Überschrift und Text liegt, aber noch vor dem
   eigenen Hintergrund des Kastens – sonst verschwände es darunter. */
.lui-sidebar-note {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.lui-sidebar-note::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -22px;
	bottom: -22px;
	width: 165px;
	height: 165px;
	background-color: var(--wp--preset--color--accent, #ff6600);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-42.184122 -40.0492697 79.012344 79.014366'%3E%3Cg transform='translate(0,42.308914)'%3E%3Cpath fill-rule='evenodd' d='m -20.778955,-80.622337 -19.6697,19.6715 a 5.926,5.926 0 0 0 -1.7355,4.19 v 27.8217 a 5.926,5.926 0 0 0 1.7357,4.1903 l 19.6695,19.6695003 a 5.926,5.926 0 0 0 4.1903,1.7357 h 27.8214 a 5.926,5.926 0 0 0 4.1902,-1.7357 l 19.6696,-19.6695003 a 5.926,5.926 0 0 0 1.7356,-4.1903 v -27.8217 a 5.926,5.926 0 0 0 -1.7354,-4.19 l -19.6697,-19.6715 a 5.926,5.926 0 0 0 -4.1905,-1.7358 h -27.821 a 5.926,5.926 0 0 0 -4.1905,1.7358 z M -3.619555,-14.210037 c 13.0897,0 16.1956,-12.0066 16.1956,-12.0066 l 7.5127,-21.5857 c 0,0 0.6784,-2.2408 0.554,-2.2657 -6.9962,-1.307 -8.4838,3.6226 -8.4838,3.6226 0,0 -2.6888,6.9836 -3.1059,6.9836 -0.417,0 -0.4668,-0.5166 -0.4668,-0.5166 v -25.09 c 0,0 0.1307,-3.2367 -3.193,-3.2367 -3.3238,0 -3.1558,3.2429 -3.1558,3.2429 l 0.0063,18.5358 c 0,0 0.0435,0.747 -0.579,0.747 -0.5539,0 -0.5227,-0.722 -0.5227,-0.722 v -22.3327 c 0,0 0.2054,-3.6475 -3.1557,-3.6475 -3.3612,0 -3.1807,3.6724 -3.1807,3.6724 l -0.031,22.0339 c 0,0 0.0435,0.6784 -0.5105,0.6784 -0.5166,0 -0.4979,-0.6722 -0.4979,-0.6722 v -18.4736 c 0,0 0.1867,-3.7595 -3.2366,-3.7595 -3.3611,0 -3.1806,3.828 -3.1806,3.828 l -0.0311,19.5068 c 0,0 0.0622,0.5664 -0.4669,0.5664 -0.5601,0 -0.5477,-0.5664 -0.5477,-0.5664 l -0.0249,-11.795 c 0,0 0.0311,-3.2615 -2.7947,-3.2615 -3.0063,0 -2.9503,3.2615 -2.9503,3.2615 v 25.4573 c 0.0187,-0.0062 -0.7594,17.7951 15.847,17.7951 z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-42.184122 -40.0492697 79.012344 79.014366'%3E%3Cg transform='translate(0,42.308914)'%3E%3Cpath fill-rule='evenodd' d='m -20.778955,-80.622337 -19.6697,19.6715 a 5.926,5.926 0 0 0 -1.7355,4.19 v 27.8217 a 5.926,5.926 0 0 0 1.7357,4.1903 l 19.6695,19.6695003 a 5.926,5.926 0 0 0 4.1903,1.7357 h 27.8214 a 5.926,5.926 0 0 0 4.1902,-1.7357 l 19.6696,-19.6695003 a 5.926,5.926 0 0 0 1.7356,-4.1903 v -27.8217 a 5.926,5.926 0 0 0 -1.7354,-4.19 l -19.6697,-19.6715 a 5.926,5.926 0 0 0 -4.1905,-1.7358 h -27.821 a 5.926,5.926 0 0 0 -4.1905,1.7358 z M -3.619555,-14.210037 c 13.0897,0 16.1956,-12.0066 16.1956,-12.0066 l 7.5127,-21.5857 c 0,0 0.6784,-2.2408 0.554,-2.2657 -6.9962,-1.307 -8.4838,3.6226 -8.4838,3.6226 0,0 -2.6888,6.9836 -3.1059,6.9836 -0.417,0 -0.4668,-0.5166 -0.4668,-0.5166 v -25.09 c 0,0 0.1307,-3.2367 -3.193,-3.2367 -3.3238,0 -3.1558,3.2429 -3.1558,3.2429 l 0.0063,18.5358 c 0,0 0.0435,0.747 -0.579,0.747 -0.5539,0 -0.5227,-0.722 -0.5227,-0.722 v -22.3327 c 0,0 0.2054,-3.6475 -3.1557,-3.6475 -3.3612,0 -3.1807,3.6724 -3.1807,3.6724 l -0.031,22.0339 c 0,0 0.0435,0.6784 -0.5105,0.6784 -0.5166,0 -0.4979,-0.6722 -0.4979,-0.6722 v -18.4736 c 0,0 0.1867,-3.7595 -3.2366,-3.7595 -3.3611,0 -3.1806,3.828 -3.1806,3.828 l -0.0311,19.5068 c 0,0 0.0622,0.5664 -0.4669,0.5664 -0.5601,0 -0.5477,-0.5664 -0.5477,-0.5664 l -0.0249,-11.795 c 0,0 0.0311,-3.2615 -2.7947,-3.2615 -3.0063,0 -2.9503,3.2615 -2.9503,3.2615 v 25.4573 c 0.0187,-0.0062 -0.7594,17.7951 15.847,17.7951 z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
	opacity: 0.18;
	pointer-events: none;
}