/*
 * Inferno AR – Lesemodus for inferno-books.com (theme modul-r + YellowPencil).
 *
 * Every block is scoped by a body class set in Reading_Mode::body_class(), so each part can be
 * switched off in "Einstellungen → Inferno AR":
 *   .inferno-lesemodus              contrast fixes (all pages)
 *   .inferno-lesemodus-text         reading typography (singular pages + front page)
 *   .inferno-lesemodus-overflowfix  neutralises YellowPencil pixel offsets on <= 768 px
 *   .inferno-lesen-aktiv            "Leseansicht" switch (posts/pages) + html[data-inferno-lesen-*]
 *
 * Specificity note: YellowPencil uses selectors up to (4,5,1) with !important, e.g.
 * "body.page-id-11 #page #content #primary #main .hentry .entry-content .wp-block-media-text …".
 * The overflow fix therefore repeats #page (5×) – a documented specificity booster – instead of
 * touching the theme or the YellowPencil file.
 *
 * Contrast (WCAG 2.x, checked in app/tests/i3 and the Playground e2e): #ff3b3b on #050505 5.9:1, white on
 * #b30000 7.2:1, #ff5c5c on #222 5.3:1, H2 #f4f4f4 18.5:1, theme grey #b5b5b5 on black 10.2:1; themes:
 * Hell 16.3:1 / links 8.3:1, Sepia 14.2:1 / links 8.6:1, Dunkel 17.0:1 / links 7.1:1.
 *
 * Regression gate: dev/replay/replay.mjs replays the 53 saved live pages before/after and fails on any new
 * horizontal overflow, text collision (line boxes vs. foreign boxes), text on the screen edge, contrast failure
 * against the background really painted behind the text, or moved desktop element.
 */

/* ===========================================================================
 * 1. Contrast fixes (all widths)
 * ======================================================================== */

/* Text links in running text: brighter red + underline (#dd0000 on black is only 4.1:1). */
body.inferno-lesemodus #main .entry-content :is(p, li, td, dd, figcaption, blockquote, cite, h3, h4, h6, .wp-block-latest-posts__post-excerpt) > a:not(:has(img)):not([class*="button"]):not([class*="inferno-"]) {
	color: #ff3b3b;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

body.inferno-lesemodus #main .entry-content :is(p, li, td, dd, figcaption, blockquote, cite, h3, h4, h6, .wp-block-latest-posts__post-excerpt) > a:not(:has(img)):not([class*="button"]):not([class*="inferno-"]):hover {
	color: #ff7a7a;
}

/* Red H5 call-to-action boxes: white on #fc1111 is 3.6:1 -> #b30000 gives 7.2:1. */
body.inferno-lesemodus #main .hentry h5 {
	background-color: #b30000;
	color: #fff;
}

body.inferno-lesemodus #main .hentry h5 a {
	color: #fff;
	text-decoration: underline;
}

/* H2 uses the theme's --gray-dark (#4e4e4e) on the black page: 2.4:1, below even the large-text minimum.
   Affects the Impressum/Datenschutz sections and /buecher/; same off-white as the H1 (#f4f4f4, 18.6:1). */
body.inferno-lesemodus #main .entry-content h2:not(.has-text-color) {
	color: #f4f4f4;
}

/* Page background: modul-r paints the canvas white-smoke (html) and keeps <body> – which carries the black
   Customizer background – at viewport height ("height: -webkit-fill-available"). Everything below the first screen
   without a background of its own (lower half of /media/, comments, tags, post navigation, "Sie könnten sich für …
   interessieren") is light text on #fafafa there (1.2:1, measured on 30+ live pages). Let the body grow with its
   content so the chosen background colour reaches the end of the page; Reading_Mode::canvas_css() also paints the
   canvas in the Customizer colour (inline rule) for content that overflows a fixed-height wrapper. */
body.inferno-lesemodus {
	height: auto !important;
}

/* Theme parts around the content (post meta, post navigation, related posts, block captions, icons) still use
   modul-r's light design – text --color--text #4e4e4e (2.5:1 on black) – because they used to sit on the light
   canvas. On the black page they get a readable grey; form fields keep their light look. */
body.inferno-lesemodus #main {
	--color--text: #b5b5b5;
	color: #b5b5b5;
}

body.inferno-lesemodus #main :is(input, textarea, select) {
	--color--text: #4e4e4e;
	color: #4e4e4e;
}

/* Same for theme parts that use the preset grey directly (breadcrumbs, post meta links, comment form labels:
   "color: var(--wp--preset--color--gray-dark)"). Scoped to these containers so author colour classes elsewhere
   keep the preset. */
body.inferno-lesemodus #main :is(.breadcrumbs, .post-meta, .entry-comments, .comment-respond) {
	--wp--preset--color--gray-dark: #b5b5b5;
}

/* Block captions: WordPress' block styles colour them #555 (":where(figcaption)", 2.8:1 on black). Low specificity
   on purpose: captions the author coloured with YellowPencil or a colour class keep their colour. */
body.inferno-lesemodus figcaption {
	color: #b5b5b5;
}

/* Links in the post meta, post navigation and related posts (#dd0000 on black is 4.1:1). Tag chips keep their
   white text on red. */
body.inferno-lesemodus #main :is(.post-meta, .article-metas, .post-navigation, .relateds, .entry-footer, .entry-comments) a:not([class*="button"]):not([rel~="tag"]):not(:has(img)),
body.inferno-lesemodus #main .entry-comments :is(.no-comments, .comments-closed) {
	color: #ff3b3b !important; /* beats .has-secondary-color { color: … !important } (#dd0000, 4.1:1) */
}

/* Code/preformatted boxes: modul-r draws them white-smoke, but YellowPencil's white text inside is invisible there
   (the English privacy policy of the old app sits in such a box). Dark box like the rest of the page. */
body.inferno-lesemodus #main :is(pre, code) {
	background-color: #111;
	border-color: #333;
}

/* Comments: modul-r gives the comment area a white-smoke box, YellowPencil gives headings and text white –
   white on #fafafa (1.03:1). On the dark page the box is not needed. */
body.inferno-lesemodus #main .entry-comments,
body.inferno-lesemodus #main .entry-comments :is(.comment-body, .comment-content, .commentlist > li, .children > li) {
	background-color: transparent;
}

/* Related posts: modul-r prints their titles as h5.has-primary-color (red), which YellowPencil's red h5 box
   (meant for the call-to-action boxes) turns into red on red (1.3:1). Same white as the call-to-action boxes. */
body.inferno-lesemodus #main .hentry h5.has-primary-color {
	color: #fff !important;
}

/* Footer links (red on #222 was 3.1:1). */
body.inferno-lesemodus #colophon .footer-info a {
	color: #ff5c5c;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Visible keyboard focus everywhere in the content. */
body.inferno-lesemodus #main a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* The neon glow is static, so "reduce motion" only stops animations and keeps it; only "more contrast" drops it. */
@media (prefers-reduced-motion: reduce) {
	body.inferno-lesemodus #main :is(h1, h3, .entry-title) {
		animation: none !important;
	}
}

@media (prefers-contrast: more) {
	body.inferno-lesemodus #main :is(h1, h3, .entry-title) {
		text-shadow: none !important;
	}
}

/* ===========================================================================
 * 2. Reading typography (front page + singular pages)
 * ======================================================================== */

/* Comfortable measure for running text. Only direct children of the content column: nested text in
   layout blocks (media & text, columns) keeps its width so desktop layouts do not change. The theme
   centres direct children (margin: auto), so a narrower paragraph stays centred. */
body.inferno-lesemodus-text #main .entry-content > :is(p, ul, ol, dl, blockquote) {
	max-width: min(70ch, 100%);
	box-sizing: border-box;
}

@media (max-width: 768px) {
	body.inferno-lesemodus-text #main .entry-content :is(p, li, dd, dt, blockquote, td, figcaption) {
		font-size: 1.0625rem;
		line-height: 1.6;
	}

	body.inferno-lesemodus-text #main .entry-content :is(p, li) {
		font-weight: 400;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	body.inferno-lesemodus-text #main .entry-content :is(img, video, iframe, svg, table) {
		max-width: 100% !important;
	}

	body.inferno-lesemodus-text #main .entry-content img:not([class*="slideshow"]):not([class*="swiper"]) {
		height: auto;
	}
}

/* ===========================================================================
 * 3. Overflow fix: YellowPencil translate()/px offsets on <= 768 px
 * ======================================================================== */

@media (max-width: 768px) {
	/* Pixel translations made for one desktop width push content out of small screens. */
	body.inferno-lesemodus-overflowfix #page#page#page#page#page :is(#content, #main, #main *):not(.swiper-wrapper, .swiper-slide, .swiper-pagination, .swiper-pagination *, .swiper-button-next, .swiper-button-prev, .slick-track, .slick-list, .slick-slide, [class*="mejs"], [class*="fancybox"], .wp-lightbox-overlay, .wp-lightbox-overlay *) {
		transform: none !important;
		translate: none !important;
	}

	/* Fixed pixel widths (e.g. width: 2381px / 436px !important) and relative "left" offsets. */
	body.inferno-lesemodus-overflowfix #page#page#page#page#page #main :is(article, header, section, div, figure, p, h1, h2, h3, h4, h5, h6, ul, ol, table, a, img, video, iframe):not(.screen-reader-text, [class*="mejs"], [class*="swiper"], [class*="slick"], [class*="fancybox"], .wp-block-cover__image-background, .wp-block-cover__video-background) {
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* Relative offsets ("position: relative; left: 111px; top: -86px") and fixed widths on layout blocks. */
	body.inferno-lesemodus-overflowfix #page#page#page#page#page #main :is(.wp-block-media-text, .wp-block-media-text > *, .wp-block-media-text__media a, .wp-block-columns, .wp-block-column, .wp-block-group, [class*="wp-container-"], .wp-block-image, .wp-block-video, .wp-block-jetpack-slideshow, h1, h2, h3, h4, h5, h6, p) {
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		width: auto !important;
	}

	/* Fixed pixel heights (e.g. ".wp-block-media-text { height: 168px }", "__media { height: 626px }",
	   ".wp-container-12 { height: 295px }") were tuned together with the translate() offsets removed above and with
	   14 px text: at 17 px the content outgrows them and the next block paints over it (measured: "Teil 4/5" captions
	   on /media/). The slideshow keeps its height – Jetpack positions its slides absolutely. */
	body.inferno-lesemodus-overflowfix #page#page#page#page#page #main :is(.wp-block-media-text, .wp-block-media-text > *, .wp-block-media-text__media a, .wp-block-columns, .wp-block-column, .wp-block-group, [class*="wp-container-"], .wp-block-image, .wp-block-video, h1, h2, h3, h4, h5, h6, p):not(.wp-block-jetpack-slideshow, .wp-block-jetpack-slideshow *, [class*="swiper"]) {
		height: auto !important;
	}

	/* Negative bottom margin of the media & text blocks on the book pages (-24px, compensated by a translateY on
	   desktop): without the transform it pulls the next heading into the red call-to-action box. The blocks are
	   clipped diagonally ("polygon(0 24px, 100% 0, 100% calc(100% - 24px), 0 100%)"); the bottom padding keeps the
	   last line (the call-to-action box) above the 24 px cut. */
	body.inferno-lesemodus-overflowfix #page#page#page#page#page #main .wp-block-media-text {
		margin-bottom: 0 !important;
		padding-bottom: 28px !important;
	}

	/* The translate() reset moves the media & text column back to x = 0: keep a gutter so the text does not touch
	   the screen edge. */
	body.inferno-lesemodus-overflowfix #page#page#page#page#page #main .wp-block-media-text > .wp-block-media-text__content {
		padding-left: max(16px, 4vw) !important;
		padding-right: max(16px, 4vw) !important;
		box-sizing: border-box;
	}

	/* Text blocks keep the theme's centring; layout parts get their YellowPencil margins removed. */
	body.inferno-lesemodus-overflowfix #page#page#page#page#page #main :is(h1, h2, h3, h4, h5, h6, p) {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.inferno-lesemodus-overflowfix #page#page#page#page#page #main :is(.wp-block-media-text, .wp-block-media-text > *, .wp-block-media-text__media a, .wp-block-column) {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Images: never wider than their column; editor-chosen sizes stay (no width reset). A fixed pixel height
	   ("height: 922px !important") would distort the image once max-width shrinks it – keep the aspect ratio. */
	body.inferno-lesemodus-overflowfix #page#page#page#page#page #main :is(.wp-block-media-text__media img, .wp-block-image img, .entry-content a img) {
		max-width: 100% !important;
		padding-left: 0 !important;
		left: auto !important;
	}

	body.inferno-lesemodus-overflowfix #page#page#page#page#page #main :is(.wp-block-media-text__media img, .wp-block-image img, .entry-content a img):not([class*="slideshow"], [class*="swiper"], .wp-block-jetpack-slideshow *) {
		height: auto !important;
	}

	/* Layout tables (front page): let cells shrink and grow. YellowPencil gives the cells fixed heights
	   ("td { height: 498px; min-height: 925px }") tuned for 14 px text; at 17 px the text ran out of its cell and the
	   next row (image, "HALLOWEEN-SPECIAL") was painted over it. */
	body.inferno-lesemodus-overflowfix #page#page#page#page#page #main .wp-block-table :is(table, thead, tbody, tr, td, th) {
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin-left: 0 !important;
	}

	body.inferno-lesemodus-overflowfix #page#page#page#page#page #main .wp-block-table table {
		table-layout: fixed;
		width: 100% !important;
	}

	body.inferno-lesemodus-overflowfix #page#page#page#page#page #main .wp-block-table td {
		overflow-wrap: break-word;
	}

	/* Hidden WordPress embeds ("position: absolute; clip: rect(1px …)" until wp-embed.js reveals them and removes
	   the style attribute): with the transform reset above their containing block becomes the viewport, and the
	   invisible 100 %-wide iframe would widen the page by its left padding (measured: 390 -> 410 px). */
	body.inferno-lesemodus-overflowfix #main iframe.wp-embedded-content[style*="clip"] {
		width: 1px !important;
		height: 1px !important;
	}

	/* Last line of defence: nothing in the content may widen the page. */
	body.inferno-lesemodus-overflowfix #main .entry-content {
		overflow-x: clip;
	}
}

@media (max-width: 500px) {
	/* modul-r turns columns into a vertical flex box on phones ("flex-flow: column"). Chrome/Safari size such column
	   items before the aspect-ratio boxes of video embeds (padding-top: 56.25 %) know their width, so the columns
	   come out shorter than their content (measured on /media/: 130 px for two 286 px YouTube embeds) and the next
	   column, heading or caption is painted over the previous one – already on the live site. Stacked columns are
	   plain blocks here: same order and width, heights from the content. */
	body.inferno-lesemodus-overflowfix #page#page#page#page#page #main .wp-block-columns:not(.is-not-stacked-on-mobile) {
		display: block !important;
	}

	body.inferno-lesemodus-overflowfix #page#page#page#page#page #main .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:last-child) {
		margin-bottom: 1.75em !important;
	}
}

/* ===========================================================================
 * 4. "Leseansicht" – themes, size, focus (html[data-inferno-lesen-*])
 * ======================================================================== */

/* Same specificity booster as the overflow fix: YellowPencil styles titles and text per page with up to four
   IDs and !important (e.g. the glowing white H1, which would be unreadable on the light themes). */

html[data-inferno-lesen-scale] body.inferno-lesen-aktiv #page#page#page#page#page #main .entry-content :is(p, li, dd, dt, blockquote, td, figcaption) {
	font-size: calc(1.0625rem * var(--inferno-lesen-scale, 1)) !important;
	line-height: 1.6 !important;
}

/* Shared theme rules: content area only; header and footer keep the brand look. */
html[data-inferno-lesen-theme] body.inferno-lesen-aktiv #page#page#page#page#page :is(#content, #primary, #main, #main.site-main, .site-content, .hentry, .entry-content) {
	background-color: var(--inferno-lesen-bg) !important;
	background-image: none !important;
}

html[data-inferno-lesen-theme] body.inferno-lesen-aktiv #page#page#page#page#page.site {
	background-color: var(--inferno-lesen-bg) !important;
}

/* Blocks with their own dark surfaces (media & text with the diagonal "traversal" clip, coloured groups/columns,
   YellowPencil's black text boxes): let the chosen reading colours show through – otherwise the dark reading text
   of "Hell"/"Sepia" would end up on black boxes. Plugin elements, covers and sliders keep their look. */
html[data-inferno-lesen-theme] body.inferno-lesen-aktiv #page#page#page#page#page #main :is(.has-background, [class*="-background-color"], [style*="background"], .wp-block-media-text, .wp-block-media-text__content, .wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-table, table, thead, tbody, tr, td, th, blockquote, p, li, h1, h2, h3, h4, h6):not([class*="inferno-"]):not(.inferno-ar-landing *):not(.wp-block-cover):not(.wp-block-cover *):not([class*="swiper"]):not([class*="slick"]) {
	background-color: transparent !important;
	background-image: none !important;
	clip-path: none !important;
}

html[data-inferno-lesen-theme] body.inferno-lesen-aktiv #page#page#page#page#page #main {
	--color--text: var(--inferno-lesen-text);
	color: var(--inferno-lesen-text) !important;
}

html[data-inferno-lesen-theme] body.inferno-lesen-aktiv #page#page#page#page#page #main :is(p, li, dd, dt, td, th, figcaption, blockquote, cite, span, strong, em, ol, ul, i, .entry-meta, .entry-meta *) {
	color: var(--inferno-lesen-text) !important;
}

html[data-inferno-lesen-theme] body.inferno-lesen-aktiv #page#page#page#page#page #main :is(h1, h2, h3, h4, h6, .entry-title) {
	color: var(--inferno-lesen-heading) !important;
	text-shadow: none !important;
}

html[data-inferno-lesen-theme] body.inferno-lesen-aktiv #page#page#page#page#page #main h5 {
	background-color: #b30000 !important;
	color: #fff !important;
}

/* Inline text inside the red boxes ("<h5><strong>Jetzt Cover anklicken …</strong></h5>") must not take the dark
   reading colour of Hell/Sepia from the rule above (measured: #2a1a12 on #b30000, 2.3:1). ".hentry" outweighs
   the ".entry-meta *" in that :is() list. */
html[data-inferno-lesen-theme] body.inferno-lesen-aktiv #page#page#page#page#page #main .hentry h5 :is(strong, b, em, i, span, mark) {
	color: #fff !important;
}

html[data-inferno-lesen-theme] body.inferno-lesen-aktiv #page#page#page#page#page #main .wp-block-media-text h4 {
	background-color: transparent !important;
}

html[data-inferno-lesen-theme] body.inferno-lesen-aktiv #page#page#page#page#page #main a:not([class*="button"]):not([class*="inferno-"]):not(h5 a) {
	color: var(--inferno-lesen-link) !important;
	text-decoration: underline;
}

html[data-inferno-lesen-theme] body.inferno-lesen-aktiv #page#page#page#page#page #main :is(.wp-block-table td, .wp-block-table th) {
	border-color: var(--inferno-lesen-border) !important;
}

html[data-inferno-lesen-theme="dunkel"] body.inferno-lesen-aktiv {
	--inferno-lesen-bg: #0b0b0b;
	--inferno-lesen-text: #f2eee8;
	--inferno-lesen-heading: #f2eee8;
	--inferno-lesen-link: #ff6b6b;
	--inferno-lesen-border: #333;
}

html[data-inferno-lesen-theme="hell"] body.inferno-lesen-aktiv {
	--inferno-lesen-bg: #faf8f5;
	--inferno-lesen-text: #1d1a17;
	--inferno-lesen-heading: #111;
	--inferno-lesen-link: #9b0000;
	--inferno-lesen-border: #d8d2ca;
	color-scheme: light;
}

html[data-inferno-lesen-theme="sepia"] body.inferno-lesen-aktiv {
	--inferno-lesen-bg: #f4ecd8;
	--inferno-lesen-text: #2a1a12;
	--inferno-lesen-heading: #22140d;
	--inferno-lesen-link: #8a0000;
	--inferno-lesen-border: #d9c9a6;
	color-scheme: light;
}

/* Focus mode: hide decoration around the text, plain headings, comfortable measure. */
html[data-inferno-lesen-fokus] body.inferno-lesen-aktiv :is(.hero, .website-hero, #secondary, .entry-footer, .post-navigation, .entry-related, .related-posts, .breadcrumbs, #breadcrumbs, .footer-widgets) {
	display: none !important;
}

html[data-inferno-lesen-fokus] body.inferno-lesen-aktiv #page#page#page#page#page #main :is(h1, h2, h3, .entry-title) {
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif !important;
	text-shadow: none !important;
	letter-spacing: normal !important;
}

html[data-inferno-lesen-fokus] body.inferno-lesen-aktiv #page#page#page#page#page #main .entry-title {
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem) !important;
	line-height: 1.2 !important;
}

html[data-inferno-lesen-fokus] body.inferno-lesen-aktiv #page#page#page#page#page #main .entry-content > :is(p, ul, ol, blockquote, h2, h3, h4) {
	max-width: min(65ch, 100%) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ===========================================================================
 * 5. Switch UI
 * ======================================================================== */

.inferno-lesen {
	position: fixed;
	left: max(12px, env(safe-area-inset-left));
	bottom: max(12px, env(safe-area-inset-bottom));
	z-index: 900; /* below cookie banners (9999+) */
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: #f7f7f7;
}

.inferno-lesen[hidden] {
	display: none;
}

/* Theme buttons (modul-r: "button:not(.has-background)", uppercase, 2px letter-spacing, secondary colour) must not
   leak into the switch: every button rule below is scoped as ".inferno-lesen button.x" (0,2,1) and resets them. */
.inferno-lesen button.inferno-lesen__toggle,
.inferno-lesen button.inferno-lesen__btn,
.inferno-lesen button.inferno-lesen__reset {
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.2;
	font-family: inherit;
	box-shadow: none;
	filter: none;
}

.inferno-lesen button.inferno-lesen__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 44px;
	padding: 0 0.95em 0 0.6em;
	border: 1px solid #444;
	border-radius: 999px;
	background: rgba(13, 13, 13, 0.92);
	color: #f7f7f7;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
	opacity: 0.85;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.inferno-lesen button.inferno-lesen__toggle:hover,
.inferno-lesen button.inferno-lesen__toggle:focus,
.inferno-lesen button.inferno-lesen__toggle:focus-visible,
.inferno-lesen.is-open button.inferno-lesen__toggle {
	background: rgba(13, 13, 13, 0.97);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
	opacity: 1;
	border-color: #dd0000;
}

.inferno-lesen button.inferno-lesen__toggle.is-customised {
	border-color: #dd0000;
}

.inferno-lesen__glyph {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #b30000;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}

.inferno-lesen__panel {
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	width: min(19rem, calc(100vw - 24px));
	padding: 1rem;
	border: 1px solid #dd0000;
	border-radius: 12px;
	background: #0d0d0d;
	box-shadow: 0 0 28px rgba(255, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.7);
}

.inferno-lesen__panel[hidden] {
	display: none;
}

.inferno-lesen__title {
	margin: 0 0 0.6rem !important;
	font-size: 1rem !important;
	font-weight: 600;
	color: #f7f7f7 !important;
}

.inferno-lesen__group {
	margin: 0 0 0.75rem;
	padding: 0;
	border: 0;
}

.inferno-lesen__group legend {
	margin-bottom: 0.35rem;
	padding: 0;
	font-size: 0.8125rem;
	color: #bdbdbd;
}

.inferno-lesen__row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.inferno-lesen button.inferno-lesen__btn,
.inferno-lesen button.inferno-lesen__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.8em;
	border: 1px solid #444;
	border-radius: 8px;
	background: #1a1a1a;
	color: #f7f7f7;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
}

.inferno-lesen button.inferno-lesen__btn:hover,
.inferno-lesen button.inferno-lesen__reset:hover,
.inferno-lesen button.inferno-lesen__btn:focus,
.inferno-lesen button.inferno-lesen__reset:focus {
	background: #262626;
	border-color: #dd0000;
	box-shadow: none;
}

.inferno-lesen button.inferno-lesen__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.inferno-lesen__value {
	min-width: 3.5em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.inferno-lesen__themes {
	flex-wrap: wrap;
	gap: 0.4rem;
}

.inferno-lesen__theme {
	position: relative;
	cursor: pointer;
}

.inferno-lesen__theme input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.inferno-lesen__theme span {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 0.7em;
	border: 1px solid #444;
	border-radius: 999px;
	font-size: 0.8125rem;
}

.inferno-lesen__theme--hell span { background: #faf8f5; color: #1d1a17; }
.inferno-lesen__theme--sepia span { background: #f4ecd8; color: #2a1a12; }
.inferno-lesen__theme--dunkel span { background: #0b0b0b; color: #f2eee8; }
.inferno-lesen__theme--original span { background: #000; color: #f7f7f7; }

.inferno-lesen__theme input:checked + span {
	border-color: #dd0000;
	box-shadow: 0 0 0 2px #dd0000;
}

.inferno-lesen__theme input:focus-visible + span,
.inferno-lesen__check input:focus-visible,
.inferno-lesen button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.inferno-lesen__check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	font-size: 0.875rem;
	cursor: pointer;
}

.inferno-lesen__check input {
	width: 20px;
	height: 20px;
	accent-color: #b30000;
}

.inferno-lesen button.inferno-lesen__reset {
	width: 100%;
	font-size: 0.8125rem;
}

/* Phones: only the round "Aa" button (44 px) so it covers as little text as possible; the label stays
   available to screen readers. */
@media (max-width: 480px) {
	.inferno-lesen button.inferno-lesen__toggle {
		padding: 0 6px;
		min-width: 44px;
		justify-content: center;
	}

	.inferno-lesen__toggle-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media print {
	.inferno-lesen {
		display: none !important;
	}
}