/*
Theme Name: Matthias Petrat
Theme URI: https://matthias-petrat.de
Description: Minimales, modernes WordPress Theme
Version: 1.0.331
Author: Matthias Petrat
Author URI: https://matthias-petrat.de
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: matthias-petrat
Domain Path: /languages
Requires at least: 5.0
Requires PHP: 7.4
*/

/* ============================================================
   BARRIEREFREIHEIT (Accessibility)
   ============================================================ */

/* Nur fuer Screenreader sichtbar, visuell versteckt */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip-Link: erscheint beim Fokussieren oben links */
.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 100000;
	padding: 12px 20px;
	background: #101009;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 8px 8px;
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 0;
	color: #fff;
	text-decoration: none;
	outline: 3px solid #0071e3;
	outline-offset: 2px;
}

/* Sichtbarer Tastaturfokus - nur bei Tastaturnutzung, nicht bei Mausklick.
   Das Suchfeld ist ausgenommen und hat einen eigenen dezenten Fokus. */
a:focus-visible,
button:focus-visible,
input:not(.search-form-input):focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="link"]:focus-visible,
[role="button"]:focus-visible {
	outline: 3px solid #0071e3;
	outline-offset: 3px;
	border-radius: 4px;
}

/* Artikelkacheln, Pillen und Boxen: Fokusring folgt der Rundung */
.article-card-link:focus-visible {
	outline: 3px solid #0071e3;
	outline-offset: 3px;
	border-radius: 20px;
}

.nav-category:focus-visible,
.footer-link:focus-visible {
	outline: 3px solid #0071e3;
	outline-offset: 3px;
	border-radius: 20px;
}

.social-icon-link:focus-visible .social-icon-circle {
	outline: 3px solid #0071e3;
	outline-offset: 3px;
}

.social-icon-link:focus-visible {
	outline: none;
}

body .entry-content .wpappbox:focus-visible,
.entry-content .aawp:focus-visible,
.entry-content .aawp-product:focus-visible {
	outline: 3px solid #0071e3 !important;
	outline-offset: 3px !important;
}

/* Nutzer, die reduzierte Bewegung bevorzugen */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================
   RESET & BASE STYLES
   ============================================================ */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
	overflow-y: scroll;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	color: #333;
	line-height: 1.6;
	background: #fff;
	font-size: 16px;
	/* Seite fuellt immer mindestens die Fensterhoehe. Dadurch bleibt
	   der Kopfbereich an derselben Stelle und der Footer rutscht bei
	   wenig Inhalt (z. B. Suche ohne Treffer) nicht nach oben. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Der Inhaltsbereich dehnt sich aus und schiebt den Footer nach unten. */
body > main {
	flex: 1 0 auto;
}

/* Kopfbereich und Footer behalten ihre natuerliche Hoehe. */
body > header,
body > .top-navigation-box,
body > footer {
	flex: 0 0 auto;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 600;
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: 0.5rem;
}

h1 {
	font-size: 2.5rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.25rem;
}

h5 {
	font-size: 1.125rem;
}

h6 {
	font-size: 1rem;
}

p {
	margin-bottom: 1rem;
}

a {
	color: #0071e3;
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: #0061c9;
	text-decoration: underline;
}

strong,
b {
	font-weight: 700;
}

em,
i {
	font-style: italic;
}

/* Lists */
ul,
ol {
	margin: 0 0 1rem 1.5rem;
}

li {
	margin-bottom: 0.5rem;
}

/* Code */
code,
pre {
	background: #f5f5f5;
	padding: 2px 6px;
	border-radius: 3px;
	font-family: 'Courier New', monospace;
	font-size: 0.9rem;
}

pre {
	padding: 1rem;
	overflow-x: auto;
	margin-bottom: 1rem;
}

/* Blockquote */
blockquote {
	border-left: 4px solid #0071e3;
	padding-left: 1rem;
	margin: 1rem 0;
	color: #666;
	font-style: italic;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ============================================================
   HEADER
   ============================================================ */

header {
	background: transparent;
	padding: 0;
	border: none;
}

header .container {
	max-width: 1200px;
}

/* ============================================================
   CUSTOM HEADER IMAGE (IN HEADER - GROSS)
   Base-Regeln stehen bewusst VOR allen Media-Queries, damit
   die responsiven Overrides (max-width:768px etc.) korrekt greifen.
   ============================================================ */

.custom-header-link {
	display: block;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.custom-header-link:hover {
	opacity: 0.9;
}

.custom-header-image {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 0;
	max-height: 212px;
	height: 212px;
}

.custom-header-image img {
	width: 100%;
	height: 212px;
	display: block;
	object-fit: contain;
	padding: 5px 20px 6px 20px;
	background: transparent;
}

.site-title {
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 10px 0;
	color: #000;
	display: none;
}

.site-title a {
	color: #000;
}

.site-title a:hover {
	color: #0071e3;
	text-decoration: none;
}

.site-description {
	font-size: 16px;
	color: #666;
	margin: 0;
	display: none;
}

/* Custom Logo */
.custom-logo {
	max-height: 60px;
	width: auto;
	margin-right: 15px;
	vertical-align: middle;
	display: none;
}

/* ============================================================
   TOP NAVIGATION BOX (Kategorien + Suchfeld in einer Box)
   ============================================================ */

.top-navigation-box {
	background: #fff;
	width: 100%;
	position: relative;
	border: none !important;
	box-shadow: none !important;
	margin: 0 0 30px 0 !important;
	padding: 0 !important;
}

.top-navigation-box::before,
.top-navigation-box::after {
	display: none !important;
}

/* ============================================================
   KATEGORIEN NAVIGATION
   ============================================================ */

.categories-nav {
	background: #fff;
	border: none !important;
	box-shadow: none !important;
	padding: 15px 20px 0 20px;
	margin: 0 !important;
	position: relative;
	width: 100%;
}

.categories-nav::before,
.categories-nav::after {
	display: none !important;
}

.categories-title {
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: #333;
	margin-bottom: 20px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.categories-nav .container {
	max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.nav-category {
	display: inline-block;
	padding: 8px 22px;
	background: rgba(136, 136, 136, 0.82);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	color: #fff !important;
	border: 0.5px solid rgba(255, 255, 255, 0.45);
	border-radius: 20px;
	font-size: 12.6px;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	transition: all 0.2s ease;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(120, 120, 120, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Fallback: kein backdrop-filter -> deckendere Farbe */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.nav-category {
		background: rgba(136, 136, 136, 0.95);
	}
}

.nav-category:hover {
	text-decoration: none;
}


.nav-category.active {
	color: #fff !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	border-color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   SEARCH FORM & SECTION
   ============================================================ */

.search-section {
	background: #fff;
	padding: 17px;
	margin: 9px 0 14px 0 !important;
	border: none !important;
	box-shadow: none !important;
	position: relative;
	width: 100%;
}

.search-section::before,
.search-section::after {
	content: '' !important;
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.search-form {
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 0;
}

.search-form-wrapper {
	display: block;
	max-width: 500px;
	margin: 0 auto;
	width: 100%;
	padding: 0;
}

.search-form-input {
	width: 100%;
	padding: 13px 18px;
	border: 0.5px solid rgba(255, 255, 255, 0.6);
	border-radius: 25px;
	font-size: 16px;
	font-family: inherit;
	background: rgba(255, 255, 255, 0.66);
	-webkit-backdrop-filter: blur(24px) saturate(190%);
	backdrop-filter: blur(24px) saturate(190%);
	box-shadow: 0 2px 8px rgba(120, 120, 120, 0.14);
	color: #101009;
	box-sizing: border-box;
	transition: box-shadow 0.2s ease, background 0.2s ease;
}

/* Fallback: kein backdrop-filter -> kraeftigerer Hintergrund */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.search-form-input {
		background: rgba(255, 255, 255, 0.92);
	}
}

/* Fokus: kein farbiger Ring, stattdessen wird das Glas kraeftiger
   und der Schatten etwas staerker. Fuer Tastaturnutzung bleibt ein
   dezenter dunkler Rand als Orientierung erhalten. */
.search-form-input:focus,
.search-form-input:focus-visible {
	outline: none;
	background: rgba(255, 255, 255, 0.86);
	border-color: rgba(0, 0, 0, 0.28);
	box-shadow: 0 2px 14px rgba(120, 120, 120, 0.24);
}

.search-form-input::placeholder {
	color: #6a6a63;
}

/* Search Results */
.search-results-title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 30px;
	color: #333;
}

.search-results-title strong {
	color: #0071e3;
}

.search-no-results {
	text-align: center;
	padding: 40px 20px;
	background: #f9f9f9;
	border-radius: 8px;
	margin: 20px 0;
	/* Mindesthoehe: verhindert, dass die Seite bei fehlenden
	   Treffern deutlich kuerzer wird als mit Ergebnissen. */
	min-height: 260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.search-no-results p {
	font-size: 16px;
	color: #666;
	margin-bottom: 10px;
}

/* ============================================================
   ARTIKEL GRID
   ============================================================ */

.articles-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	gap: 18px;
	margin: 15px 0 40px 0;
	width: 100%;
}

.article-card {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(120, 120, 120, 0.14);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #d8d8d8;
}

.article-card:hover {
	box-shadow: 0 2px 8px rgba(120, 120, 120, 0.14);
}

/* Kachel-Link: Beitragsbild als Hintergrund, Glaspanel unten */
.article-card-link {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center 75%;
	background-repeat: no-repeat;
	background-color: #cfcfcf;
	text-decoration: none;
	border-radius: 20px;
	overflow: hidden;
}

/* Bildbereich oben: festes Seitenverhaeltnis, Motivmitte immer sichtbar */
.article-card-photo {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: 62%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #cfcfcf;
	flex-shrink: 0;
}

.article-card-link:hover {
	text-decoration: none;
}

/* Glaspanel mit dem Textinhalt - randlos unter dem Bild */
.article-card-glass {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 13px 15px 15px 15px;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.66);
	-webkit-backdrop-filter: blur(24px) saturate(190%);
	backdrop-filter: blur(24px) saturate(190%);
	border: none;
	border-top: 0.5px solid rgba(255, 255, 255, 0.55);
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Fallback: kein backdrop-filter -> kraeftigerer Hintergrund */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.article-card-glass {
		background: rgba(255, 255, 255, 0.92);
	}
}

/* FOOTER - Kategorie + Datum in einer Zeile, jetzt OBEN im Glaspanel */
.article-card-footer {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 8px 0;
	flex-wrap: wrap;
}

.article-category {
	margin: 0;
	padding: 0;
}

.article-card-footer .article-category {
	margin: 0;
	padding: 0;
}

.article-card-footer .article-card-meta {
	margin: 0;
	padding: 0;
	font-size: 11px;
	color: #33332f;
	white-space: nowrap;
}

.article-card-meta {
	font-size: 11px;
	color: #33332f;
	margin: 0;
	padding: 0;
}

.article-category-badge {
	display: inline-block;
	padding: 4px 10px;
	background: rgba(88, 86, 214, 0.85);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	color: #fff;
	border: 0.5px solid rgba(255, 255, 255, 0.45);
	border-radius: 12px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.4px;
	white-space: nowrap;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.article-category-badge:hover {
	opacity: 1;
	text-decoration: none;
}

/* Grosse Ueberschrift - jetzt UNTER dem Zusatztext, 2 Zeilen fest */
.article-card-title {
	font-size: clamp(14px, 3.4vw, 19px);
	font-weight: 600;
	color: #101009;
	margin: 0;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
	overflow-wrap: break-word;
	min-height: 46px;
}

.article-card-title a {
	color: #101009;
}

.article-card-title a:hover {
	color: #101009;
}

/* Kleine Ueberschrift - bis zu ZWEI Zeilen, bricht bei Bedarf um */
.article-card-subtitle {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: clamp(0.6rem, 1.05vw, 0.7rem);
	font-weight: 500;
	color: #3a3a35;
	margin: 0 0 5px 0;
	padding: 0;
	letter-spacing: 0.2px;
	line-height: 1.35;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: break-word;
	overflow: hidden;
	min-height: 30px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.article-card-excerpt {
	font-size: 13px;
	color: #33332e;
	margin: 0 0 8px 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


/* Artikel Card Badges - Kategorien Farben */
.article-card.category-alle .article-category-badge {
	background: rgba(88, 86, 214, 0.85);
}

.article-card.category-allgemein .article-category-badge {
	background: rgba(52, 199, 89, 0.85);
}

.article-card.category-hardware .article-category-badge {
	background: rgba(255, 149, 0, 0.85);
}

.article-card.category-kolumnen .article-category-badge {
	background: rgba(175, 82, 222, 0.85);
}

.article-card.category-software .article-category-badge {
	background: rgba(212, 160, 23, 0.85);
	color: #fff;
}

.article-card.category-3d-druck .article-category-badge {
	background: rgba(0, 180, 216, 0.85);
}

.article-card.category-infopush .article-category-badge {
	background: rgba(255, 45, 85, 0.85);
}

.article-card.category-angebote .article-category-badge {
	background: rgba(0, 137, 123, 0.85);
	color: #fff;
}

@media (max-width: 767px) {
	/* Liquid-Glass-Kacheln auf Tablets/Handys */
	.article-card-glass {
		margin: 0;
		padding: 11px 12px 12px 12px;
		border-radius: 0;
	}

	.article-card-title {
		min-height: 42px;
	}

	.article-card-subtitle {
		min-height: 28px;
	}

	.search-section {
		padding: 17px !important;
		margin: 9px 0 14px 0 !important;
		border: none !important;
		box-shadow: none !important;
	}

	.search-form-wrapper {
		display: block;
		max-width: 100%;
	}

	.search-form-input {
		padding: 9px 14px;
		font-size: 16px;
		width: 100%;
	}

	.categories-nav .container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px !important;
	}

	/* Exakt 4 Pillen pro Zeile (2 Zeilen bei 8 Kategorien).
	   Kompakte Werte, damit auch auf schmalen iPhones (375px)
	   kein Kategoriename abgeschnitten wird.
	   flex: 0 0 -> feste Breite, garantiert 4 pro Zeile.
	   Breite = (100% - 3*gap) / 4 = calc(25% - 4.5px) bei gap 6px. */
	.nav-category {
		flex: 0 0 calc(25% - 4.5px);
		max-width: calc(25% - 4.5px);
		min-width: 0;
		box-sizing: border-box;
		padding: 6px 3px;
		font-size: 9px;
		white-space: nowrap;
	}

	.footer-nav {
		gap: 6px;
		margin-bottom: 20px;
		flex-wrap: nowrap;
	}

	.footer-link {
		padding: 7px 8px;
		font-size: 10px;
		white-space: nowrap;
	}

	.footer-copyright {
		font-size: 12px;
	}

	.articles-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.article-card-subtitle {
		font-size: clamp(0.6rem, 1.3vw, 0.7rem);
		margin: 0 0 5px 0;
		padding: 0;
		min-height: 28px;
	}

	.article-card-title {
		font-size: clamp(13px, 3.5vw, 18px);
		min-height: 50px;
		padding: 0;
	}

	.article-card-excerpt {
		font-size: 12px;
	}

	.custom-header-link {
		display: block;
	}

	.custom-header-image {
		max-height: 140px;
		height: 140px;
	}

	.custom-header-image img {
		height: 140px;
		padding: 10px 20px;
	}
}

/* ============================================================
   KATEGORIEN FARBEN (NUR ACTIVE)
   ============================================================ */

/* Alle Artikel - Indigo */
.nav-category.active {
	background: rgba(88, 86, 214, 0.85);
	color: #fff !important;
}

/* Allgemein - Grün */
.nav-category[data-category="allgemein"].active {
	background: rgba(52, 199, 89, 0.85);
	color: #fff !important;
}

/* Hardware - Orange */
.nav-category[data-category="hardware"].active {
	background: rgba(255, 149, 0, 0.85);
	color: #fff !important;
}

/* Kolumnen - Lila */
.nav-category[data-category="kolumnen"].active {
	background: rgba(175, 82, 222, 0.85);
	color: #fff !important;
}

/* Software - Gelb */
.nav-category[data-category="software"].active {
	background: rgba(212, 160, 23, 0.85);
	color: #fff !important;
}

/* 3D-Druck - Cyan */
.nav-category[data-category="3d-druck"].active {
	background: rgba(0, 180, 216, 0.85);
	color: #fff !important;
}

/* Infopush - Pink */
.nav-category[data-category="infopush"].active {
	background: rgba(255, 45, 85, 0.85);
	color: #fff !important;
}

/* Angebote - Dunkleres Türkis */
.nav-category[data-category="angebote"].active {
	background: rgba(0, 137, 123, 0.85);
	color: #fff !important;
}

/* ------------------------------------------------------------
   HOVER-VORSCHAU: Beim Ueberfahren zeigt die Pille bereits ihre
   volle Kategoriefarbe - identisch zum aktiven Zustand.
   Nur auf Geraeten mit echtem Mauszeiger.
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
	.nav-category:not(.active):hover {
		background: rgba(88, 86, 214, 0.85);
	}

	.nav-category[data-category="allgemein"]:not(.active):hover {
		background: rgba(52, 199, 89, 0.85);
	}

	.nav-category[data-category="hardware"]:not(.active):hover {
		background: rgba(255, 149, 0, 0.85);
	}

	.nav-category[data-category="kolumnen"]:not(.active):hover {
		background: rgba(175, 82, 222, 0.85);
	}

	.nav-category[data-category="software"]:not(.active):hover {
		background: rgba(212, 160, 23, 0.85);
	}

	.nav-category[data-category="3d-druck"]:not(.active):hover {
		background: rgba(0, 180, 216, 0.85);
	}

	.nav-category[data-category="infopush"]:not(.active):hover {
		background: rgba(255, 45, 85, 0.85);
	}

	.nav-category[data-category="angebote"]:not(.active):hover {
		background: rgba(0, 137, 123, 0.85);
	}

	/* Leichtes Anheben verstaerkt den Vorschau-Charakter */
	.nav-category:not(.active):hover {
		transform: translateY(-1px);
		box-shadow: 0 3px 10px rgba(120, 120, 120, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	}
}

@media (max-width: 480px) {
	/* Liquid-Glass-Kacheln auf kleinen iPhones */
	.article-card-glass {
		margin: 0;
		padding: 10px 11px 11px 11px;
		border-radius: 0;
	}

	.article-card-title {
		min-height: 38px;
	}

	.article-card-subtitle {
		min-height: 26px;
	}

	header {
		padding: 0 10px !important;
		margin-bottom: 0 !important;
	}

	/* Seitenrand der Kacheln um ~70% reduziert (20px -> 6px),
	   dadurch werden die Kacheln deutlich breiter. */
	.container {
		padding: 0 6px;
	}

	.top-navigation-box {
		margin: 0 !important;
	}

	.search-section {
		padding: 5px 15px !important;
		margin: 6px 0 8px 0 !important;
	}

	body .top-navigation-box .search-section {
		padding: 5px 15px !important;
		margin: 6px 0 8px 0 !important;
	}

	/* Suchfeld ~20% kuerzer, bleibt mittig zentriert */
	.search-form-wrapper {
		max-width: 92% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	body .top-navigation-box .categories-nav,
	body .categories-nav {
		padding: 0 6px 0 6px !important;
		margin-top: 0 !important;
	}

	.top-navigation-box .categories-nav {
		padding-top: 0 !important;
	}

	/* Pillen-Container laeuft zum Rand wie die Artikelkacheln (~12px).
	   categories-nav(6px) + container(6px) = 12px, identisch zu den Kacheln.
	   body-Praefix fuer hoehere Spezifitaet gegen die Basis-Regeln. */
	body .top-navigation-box .categories-nav .container,
	body .categories-nav .container {
		padding: 0 6px 12px 6px !important;
		gap: 6px !important;
	}

	body .top-navigation-box .categories-nav .categories-title {
		padding: 0 20px 6px 20px !important;
		margin: 0 !important;
		font-size: 12px !important;
	}

	.nav-category {
		/* Werte konsistent mit 767px-Regel: 4 pro Zeile, kompakt */
		padding: 6px 3px;
		font-size: 9px;
	}

	.categories-title {
		font-size: 12px;
		margin-bottom: 6px;
	}

	.articles-grid {
		grid-template-columns: 1fr;
		gap: 15px;
		margin-top: 0 !important;
	}

	/* Startseite: Abstand unter dem Suchfeld (zur ersten Kachel) genauso
	   gross wie ueber dem Suchfeld (zu den Kategorien). Dafuer das obere
	   main-Padding auf der Startseite reduzieren. */
	.home main,
	.blog main,
	.archive main,
	.search main {
		padding-top: 4px !important;
	}

	.article-card-subtitle {
		font-size: 11px;
		margin: 0 0 5px 0;
		padding: 0;
		min-height: 26px;
	}

	.article-card-title {
		font-size: clamp(12px, 3.2vw, 14px);
		min-height: 40px;
		padding: 0;
		margin: 0 0 6px 0;
	}

	.custom-header-link {
		display: block;
	}

	/* Header-Grafik: Logo nutzt die VOLLE Breite und wird dadurch
	   ~25% groesser. Container-Hoehe an die Logo-Hoehe angepasst,
	   damit KEIN Weissraum ueber/unter dem breiten Logo entsteht. */
	.custom-header-image {
		max-height: 104px;
		height: 104px;
	}

	.custom-header-image img {
		height: 104px;
		padding: 2px 2px;
	}

	/* ARTIKEL & SEITEN (single/page) auf dem iPhone:
	   Text, Ueberschriften und Meta bekommen komfortablen Seitenabstand
	   (nicht direkt am Rand kleben). Bilder laufen dagegen randlos.
	   Header und Content nutzen DENSELBEN Abstand -> alles linksbuendig. */
	.single .entry-header,
	.single .entry-content,
	.page .entry-header,
	.page .entry-content {
		width: calc(100% + 6px);
		max-width: calc(100% + 6px);
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: -3px;
		margin-right: -3px;
		box-sizing: border-box;
	}

	/* Absaetze/Ueberschriften im Content erben den Abstand vom Content,
	   kein zusaetzlicher Einzug -> buendig mit dem Header. */
	.single .entry-content p,
	.single .entry-content h2,
	.single .entry-content h3,
	.single .entry-content ul,
	.single .entry-content ol,
	.page .entry-content p,
	.page .entry-content h2,
	.page .entry-content h3,
	.page .entry-content ul,
	.page .entry-content ol {
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
	}

	/* Bilder im Artikel/auf Seiten laufen von Rand zu Rand (randlos).
	   Full-bleed: bricht aus dem Text-Padding UND dem Container-Padding
	   aus, bis zum echten Displayrand.
	   AUSNAHME 1: Bilder INNERHALB der Shop-/App-/Amazon-Boxen NICHT
	   anfassen - diese Boxen regeln ihre Bilder selbst (tief verschachtelt,
	   daher kein direktes Kind).
	   AUSNAHME 2: Individuell dimensionierte Bilder NICHT randlos machen.
	   WordPress markiert diese mit:
	     - .is-resized      (Bildgroesse im Editor manuell gezogen)
	     - .size-thumbnail/.size-medium/.size-large (feste Bildgroesse gewaehlt)
	     - .alignleft/.alignright/.aligncenter (bewusst ausgerichtet)
	   Diese behalten ihre individuell eingestellte Groesse. */
	.single .entry-content > img:not([style*="width"]):not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter),
	.single .entry-content > figure:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[style*="width"])):not(:has(img.size-thumbnail)):not(:has(img.size-medium)),
	.single .entry-content > .wp-block-image:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[style*="width"])):not(:has(img.size-thumbnail)):not(:has(img.size-medium)),
	.single .entry-content > p > img:not([style*="width"]):not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter),
	.page .entry-content > img:not([style*="width"]):not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter),
	.page .entry-content > figure:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[style*="width"])):not(:has(img.size-thumbnail)):not(:has(img.size-medium)),
	.page .entry-content > .wp-block-image:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[style*="width"])):not(:has(img.size-thumbnail)):not(:has(img.size-medium)),
	.page .entry-content > p > img:not([style*="width"]):not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter) {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		border-radius: 8px;
	}

	/* Das Bild selbst fuellt die volle Breite, ohne Radius
	   (nur bei den randlosen figures/wp-block-images, nicht bei den
	   individuell dimensionierten). */
	.single .entry-content > figure:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.size-large):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[width])):not(:has(> img[style*="width"])):not(:has(img.size-thumbnail)):not(:has(img.size-medium)):not(:has(img.size-large)) img,
	.single .entry-content > .wp-block-image:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.size-large):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[width])):not(:has(> img[style*="width"])):not(:has(img.size-thumbnail)):not(:has(img.size-medium)):not(:has(img.size-large)) img,
	.page .entry-content > figure:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.size-large):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[width])):not(:has(> img[style*="width"])):not(:has(img.size-thumbnail)):not(:has(img.size-medium)):not(:has(img.size-large)) img,
	.page .entry-content > .wp-block-image:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.size-large):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[width])):not(:has(> img[style*="width"])):not(:has(img.size-thumbnail)):not(:has(img.size-medium)):not(:has(img.size-large)) img {
		width: 100%;
		max-width: 100%;
		margin: 0;
		border-radius: 8px;
	}

	/* Individuell dimensionierte Bilder: exakt in der eingestellten
	   Groesse anzeigen, zentriert, NICHT randlos. */
	.single .entry-content > figure.is-resized,
	.single .entry-content > .wp-block-image.is-resized,
	.single .entry-content > img.is-resized,
	.page .entry-content > figure.is-resized,
	.page .entry-content > .wp-block-image.is-resized,
	.page .entry-content > img.is-resized {
		width: auto;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.single .entry-content > figure.is-resized img,
	.single .entry-content > .wp-block-image.is-resized img,
	.page .entry-content > figure.is-resized img,
	.page .entry-content > .wp-block-image.is-resized img {
		width: auto;
		max-width: 100%;
	}

	/* Bildunterschrift bleibt lesbar eingerueckt (nicht am Rand) */
	.single .entry-content > figure figcaption,
	.page .entry-content > figure figcaption {
		padding-left: 8px;
		padding-right: 8px;
	}

	/* APP-BOX / SHOP-BOX / AMAZON-BOX laufen auf TEXT-FLUCHT (gleicher
	   Randabstand wie der Text), NICHT randlos. Die Bilder INNERHALB
	   dieser Boxen werden NICHT angefasst (Box regelt das selbst). */
	.post-end-promotions {
		padding-left: 2px;
		padding-right: 2px;
		box-sizing: border-box;
	}

	/* Shop-/Amazon-Box bleiben auf 14px (unveraendert). Da der
	   entry-content um -3px verschoben ist, hier +3px zurueck. */
	.single .entry-content .shop-product,
	.single .entry-content .aawp,
	.page .entry-content .shop-product,
	.page .entry-content .aawp {
		margin-left: 3px;
		margin-right: 3px;
		max-width: calc(100% - 6px);
		box-sizing: border-box;
	}

	/* Riesigen Abstand zwischen letzter App-Box und den Footer-Pillen
	   um ~90% reduzieren (war ~160px). Alle vier Anteile verkleinern. */
	.post-end-promotions {
		/* Abstand zum Artikelende verdoppelt: der Block wurde
		   vorher um 9px nach oben gezogen, jetzt sitzt er mit
		   deutlichem Abstand darunter. */
		margin-top: 22px !important;
		margin-bottom: 4px;
		padding-top: 2px !important;
	}

	main {
		padding-bottom: 4px !important;
	}

	footer {
		margin-top: 4px !important;
		padding-top: 4px !important;
	}

	.footer-content {
		padding-top: 8px !important;
	}

	/* ------------------------------------------------------------
	   NACHZUEGLER: Bilder, die NICHT direktes Kind von .entry-content
	   sind (z.B. in einem Gruppen-Block oder sonstigen Wrapper),
	   laufen ebenfalls randlos. Boxen mit eigenem Layout - Amazon,
	   App-Store, Shop, Banner, Promo - sind ausgenommen, sie regeln
	   ihre Bilder selbst.
	   ------------------------------------------------------------ */
	.single .entry-content figure.wp-block-image:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter),
	.page .entry-content figure.wp-block-image:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter) {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		border-radius: 8px;
	}

	.single .entry-content figure.wp-block-image:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.size-large):not(.alignleft):not(.alignright):not(.aligncenter) img,
	.page .entry-content figure.wp-block-image:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.size-large):not(.alignleft):not(.alignright):not(.aligncenter) img {
		width: 100%;
		max-width: 100%;
		height: auto;
		border-radius: 8px;
		display: block;
	}

	/* Boxen mit eigenem Layout bleiben unberuehrt */
	.entry-content .aawp figure,
	.entry-content .aawp img,
	.entry-content .wpappbox figure,
	.entry-content .wpappbox img,
	.entry-content .shop-product figure,
	.entry-content .shop-product img,
	.entry-content .artikel-banner-wrapper figure,
	.entry-content .post-end-promotions figure,
	.entry-content .post-end-promotions img,
	.entry-content .wp-block-gallery figure,
	.entry-content .wp-block-gallery img {
		width: auto;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	/* Absicherung gegen horizontale Scrollbar durch 100vw */
	html, body {
		overflow-x: clip;
	}
}

/* Groessere iPhones (z.B. 17 Pro Max, ~430px+): Kategorie-Pillen
   ~10% groesser (mehr Padding + groessere Schrift). Auf kleineren
   iPhones bleibt es kompakt (siehe 480px-Block oben). */
@media (min-width: 431px) and (max-width: 480px) {
	.nav-category {
		padding: 8px 6px;
		font-size: 11px;
	}
}

article:not(.article-card) {
	margin-bottom: 40px;
	padding-bottom: 40px;
}

article:not(.article-card):last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

.entry-header {
	margin-bottom: 20px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.entry-subtitle {
	font-size: clamp(0.85rem, 2vw, 0.95rem);
	font-weight: 500;
	color: #666;
	margin-bottom: 16px;
	letter-spacing: 0.5px;
	line-height: 1.4;
	word-break: break-word;
	overflow-wrap: break-word;
}

.entry-title {
	font-size: clamp(1.25rem, 3.2vw, 1.6rem);
	line-height: 1.3;
	margin: 0 0 12px 0;
	font-weight: 700;
	color: #000;
}

.entry-title a {
	color: #000;
	text-decoration: none;
}

.entry-title a:hover {
	color: #4a90e2;
}

.entry-meta {
	font-size: 14px;
	color: #666;
	margin-bottom: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.entry-date {
	color: #666;
	font-weight: 500;
}

.entry-meta-separator {
	color: #999;
}

.entry-category-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 15px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	background: rgba(136, 136, 136, 0.85);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border: 0.5px solid rgba(255, 255, 255, 0.45);
	box-shadow: 0 2px 8px rgba(120, 120, 120, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	color: #fff;
	transition: all 0.2s ease;
}

.entry-category-badge:hover {
	opacity: 0.8;
	text-decoration: none;
}

/* Kategorie-spezifische Badge-Farben */
.entry-category-badge.category-allgemein {
	background: rgba(52, 199, 89, 0.85);
	color: #fff;
}

.entry-category-badge.category-hardware {
	background: rgba(255, 149, 0, 0.85);
	color: #fff;
}

.entry-category-badge.category-kolumnen {
	background: rgba(175, 82, 222, 0.85);
	color: #fff;
}

.entry-category-badge.category-software {
	background: rgba(212, 160, 23, 0.85);
	color: #fff;
}

.entry-category-badge.category-3d-druck {
	background: rgba(0, 180, 216, 0.85);
	color: #fff;
}

.entry-category-badge.category-infopush {
	background: rgba(255, 45, 85, 0.85);
	color: #fff;
}

.entry-category-badge.category-angebote {
	background: rgba(0, 137, 123, 0.85);
	color: #fff;
}

.entry-image {
	margin: 0 0 30px 0;
	overflow: hidden;
	border-radius: 8px;
}

.entry-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.entry-content {
	max-width: 800px;
	margin: 0 auto;
	line-height: 1.8;
	font-size: 16px;
	color: #333;
}

.entry-content p {
	margin: 15px 0 15px 0;
	line-height: 1.8;
}

.entry-content h2 {
	font-size: 1.5rem;
	margin: 30px 0 15px 0;
	line-height: 1.3;
	color: #000;
	font-weight: 700;
}

.entry-content h3 {
	font-size: 1.2rem;
	margin: 25px 0 12px 0;
	line-height: 1.3;
	color: #000;
	font-weight: 600;
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 20px 20px;
	padding: 0;
}

.entry-content li {
	margin-bottom: 8px;
}

/* ============================================================
   ARTIKEL-BANNER (feste Bannerplaetze am Artikelende)
   [artikel_banner1] oben, [artikel_banner2] darunter mit 5px Abstand.
   Bilder werden wie normale Bilder im Artikel dargestellt.
   ============================================================ */
.artikel-banner-wrapper {
	margin: 30px 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-width: 100%;
}

.artikel-banner-wrapper img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0;
	border-radius: 20px;
}

.artikel-banner-wrapper a {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.entry-content img {
	/* KEINE width-Regel - respektiert inline Styles vom Editor! */
	height: auto;
	display: block;
	margin: 20px auto;
	border-radius: 8px;
}

@media (min-width: 768px) {
	.entry-content img {
		/* Desktop: Inline Styles werden respektiert, max-width begrenzt Größe */
		max-width: 100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 767px) {
	.entry-content img {
		/* Mobile: Responsive aber respektiert Editor-Größen */
		max-width: 100%;
		height: auto;
		margin: 20px auto;
	}
}

/* Figure mit Bildunterschrift */
.entry-content figure {
	margin: 20px 0;
	max-width: 100%;
	display: block;
}

.entry-content figure img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0;
	border-radius: 8px;
}

.entry-content figcaption {
	font-size: 0.9rem;
	color: #666;
	margin-top: 10px;
	padding: 0 10px;
	font-style: italic;
	line-height: 1.5;
	text-align: center;
}

/* Responsive: Tablet */
@media (max-width: 768px) {
	.entry-content figure {
		margin: 15px 0;
	}

	.entry-content figcaption {
		font-size: 0.85rem;
		padding: 0 8px;
	}
}

/* Responsive: Mobile */
@media (max-width: 480px) {
	.entry-content figure {
		margin: 15px 0;
	}

	.entry-content figcaption {
		font-size: 0.8rem;
		padding: 0 6px;
	}
}

/* ============================================================
   RANDLOSE BILDER im iPad-HOCHFORMAT
   Bilder mit leerem alt="" laufen von Displayrand zu Displayrand.
   Breiten-basiert (768-1024px + portrait) statt Touch-basiert, damit
   es auch auf iPads mit angeschlossener Maus/Tastatur greift.
   Querformat und Desktop bleiben unveraendert.
   Technik: full-bleed via margin calc(50% - 50vw), bricht aus
   .entry-content (max-width:800px) UND .container (padding:20px) aus.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	/* Absicherung: verhindert horizontale Scrollbar durch 100vw-Ausbruch. */
	html, body {
		overflow-x: clip;
	}

	/* RANDLOS: Bilder OHNE individuelle Groessenangabe laufen von
	   Displayrand zu Displayrand.
	   NICHT randlos (behalten ihre Groesse) sind Bilder mit:
	     - [width]            HTML-width-Attribut (der "Altwert")
	     - [style*="width"]   Inline-Style mit Breite
	     - .is-resized        Bildgroesse im Editor gezogen
	     - .size-*            feste Bildgroesse gewaehlt
	     - .align*            bewusst ausgerichtet
	   Diese Marker werden per :not(...) bzw. :not(:has(img...)) ausgenommen. */
	.entry-content > figure:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[style*="width"])):not(:has(> img.size-thumbnail)):not(:has(> img.size-medium)),
	.entry-content > .wp-block-image:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[style*="width"])):not(:has(> img.size-thumbnail)):not(:has(> img.size-medium)),
	.entry-content > img:not([style*="width"]):not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter),
	.entry-content > p > img:not([style*="width"]):not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter),
	.entry-content .alignfull {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		border-radius: 8px;
		display: block;
	}

	/* Die Bilder in randlosen figures: volle Breite, ohne Radius */
	.entry-content > figure:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.size-large):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[width])):not(:has(> img[style*="width"])):not(:has(> img.size-thumbnail)):not(:has(> img.size-medium)):not(:has(> img.size-large)) img,
	.entry-content > .wp-block-image:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.size-large):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[width])):not(:has(> img[style*="width"])):not(:has(> img.size-thumbnail)):not(:has(> img.size-medium)):not(:has(> img.size-large)) img,
	.entry-content .alignfull img {
		width: 100%;
		max-width: 100%;
		height: auto;
		border-radius: 8px;
		display: block;
	}

	/* Individuell dimensionierte Bilder: exakt in eingestellter Groesse,
	   zentriert, NICHT randlos. */
	.entry-content > figure.is-resized,
	.entry-content > .wp-block-image.is-resized,
	.entry-content > figure:has(> img[width]),
	.entry-content > figure:has(> img[style*="width"]),
	.entry-content > .wp-block-image:has(> img[width]),
	.entry-content > .wp-block-image:has(> img[style*="width"]) {
		margin-left: auto;
		margin-right: auto;
	}

	/* Bildunterschrift randloser Bilder bleibt lesbar eingerueckt */
	.entry-content > figure:not(.is-resized):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[width])) figcaption,
	.entry-content .alignfull figcaption {
		padding-left: 20px;
		padding-right: 20px;
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ============================================================
   RANDLOSE BILDER im iPad-QUERFORMAT
   Gleiche Logik wie Hochformat, aber fuer Landscape.
   iPad quer ist 1024-1366px breit -> eigener Breakpoint mit
   orientation:landscape + Touch, damit Desktop unberuehrt bleibt.
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
	html, body {
		overflow-x: clip;
	}

	.entry-content > figure:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[style*="width"])):not(:has(> img.size-thumbnail)):not(:has(> img.size-medium)),
	.entry-content > .wp-block-image:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[style*="width"])):not(:has(> img.size-thumbnail)):not(:has(> img.size-medium)),
	.entry-content > img:not([style*="width"]):not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter),
	.entry-content > p > img:not([style*="width"]):not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter),
	.entry-content .alignfull {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		border-radius: 8px;
		display: block;
	}

	.entry-content > figure:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.size-large):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[width])):not(:has(> img[style*="width"])):not(:has(> img.size-thumbnail)):not(:has(> img.size-medium)):not(:has(> img.size-large)) img,
	.entry-content > .wp-block-image:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.size-large):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[width])):not(:has(> img[style*="width"])):not(:has(> img.size-thumbnail)):not(:has(> img.size-medium)):not(:has(> img.size-large)) img,
	.entry-content .alignfull img {
		width: 100%;
		max-width: 100%;
		height: auto;
		border-radius: 8px;
		display: block;
	}
}

.entry-content a {
	color: #4a90e2;
	text-decoration: none;
}

.entry-content a:hover {
	color: #0071e3;
	text-decoration: none;
}

/* Shop-Produkt-Links NICHT unterstreichen */
.entry-content .shop-product a,
.entry-content .shop-product-title a,
.entry-content .aawp-product a,
.entry-content .aawp-product-name a,
.entry-content .sp-product-box a {
	text-decoration: none !important;
	color: #000 !important;
}

.entry-content .shop-product a:hover,
.entry-content .shop-product-title a:hover,
.entry-content .aawp-product a:hover,
.entry-content .aawp-product-name a:hover,
.entry-content .sp-product-box a:hover {
	text-decoration: none !important;
	color: #000 !important;
	opacity: 1 !important;
}

.entry-content .aawp a[href*="amazon"] {
	text-decoration: none !important;
	color: #000 !important;
}

.entry-content .aawp a[href*="amazon"]:hover {
	text-decoration: none !important;
	color: #000 !important;
}

.entry-content a:hover {
	opacity: 0.8;
}

/* ============================================================
   BUTTONS & LINKS
   ============================================================ */

button,
input[type="button"],
input[type="submit"],
.button {
	background: #0071e3;
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	transition: background 0.2s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover {
	background: #0061c9;
	text-decoration: none;
}

/* ============================================================
   FORMS
   ============================================================ */

input,
textarea,
select {
	max-width: 100%;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-family: inherit;
	font-size: 16px;
	transition: border-color 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: #0071e3;
	box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}

label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
	color: #333;
}


/* ============================================================
   PAGINATION NAVIGATION
   ============================================================ */

.pagination {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 12px;
	margin: 40px 0;
	list-style: none;
	padding: 0;
	flex-wrap: wrap;
}

.pagination li {
	margin: 0;
}

.pagination a,
.pagination span {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s ease;
	color: #333;
	background: #f0f0f0;
	border: 1px solid #e0e0e0;
}

.pagination a:hover {
	background: #e0e0e0;
	color: #000;
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: #4a90e2;
	color: #fff;
	border-color: #4a90e2;
	cursor: default;
}

.pagination .prev,
.pagination .next {
	font-weight: 600;
}

/* ============================================================
   SIMPLE PAGINATION (posts-navigation) - iOS Style
   ============================================================ */

.navigation.posts-navigation {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 30px;
	margin: 50px 0 40px 0;
	padding: 20px;
	text-align: left;
}

.nav-previous {
	order: 1;
}

.nav-next {
	order: 2;
	margin-left: auto;
	text-align: right;
}

.nav-previous:empty {
	display: none;
}

.nav-next:empty {
	display: none;
}

.navigation.posts-navigation a {
	padding: 0;
	background: transparent;
	border: none;
	color: #4a90e2;
	text-decoration: none;
	font-weight: 400;
	font-size: 15px;
	transition: opacity 0.2s ease;
}

.navigation.posts-navigation a:hover {
	opacity: 0.6;
	text-decoration: none;
	background: transparent;
	border: none;
	color: #4a90e2;
}

/* Responsive: Mobile */
@media (max-width: 480px) {
	.navigation.posts-navigation {
		flex-direction: column;
		gap: 15px;
		margin: 30px 0 20px 0;
		padding: 10px;
	}

	.navigation.posts-navigation a {
		font-size: 14px;
	}
}

/* ============================================================
   PAGINATION (alt - wird nicht mehr verwendet)
   ============================================================ */

footer {
	background: #fff;
	padding: 0;
	border: none !important;
	margin-top: 42px;
}

/* ============================================================
   SOCIAL MEDIA SEKTION
   Runde Icons mit Beschriftung, zentriert.
   ============================================================ */
.social-media-section {
	text-align: center;
	padding: 28px 20px 30px 20px;
}

.social-media-heading {
	font-size: 0.85rem;
	font-weight: 400;
	color: #555;
	margin: 0 0 20px 0;
}

.social-media-icons {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.social-icon-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: #555;
	cursor: pointer;
}

.social-icon-circle {
	width: 53px;
	height: 53px;
	border-radius: 50%;
	background: #ececec;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #444;
	transition: background 0.2s ease;
}

.social-icon-link:hover .social-icon-circle {
	background: #d0d0d0;
}

.social-icon-label {
	font-size: 0.7rem;
	font-weight: 500;
	color: #777;
}

/* ------------------------------------------------------------
   MOBIL: Alle sieben Icons bleiben in EINER Reihe.
   Kreise und Abstaende schrumpfen mit, statt umzubrechen.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
	/* Seitenabstand der Sektion reduzieren -> mehr Platz fuer die
	   sieben Icons, dadurch groessere Abstaende dazwischen und
	   vollstaendig lesbare Beschriftungen. */
	.social-media-section {
		padding-left: 6px;
		padding-right: 6px;
	}

	.social-media-icons {
		flex-wrap: nowrap;
		gap: 0;
		justify-content: space-between;
	}

	.social-icon-link {
		flex: 1 1 0;
		min-width: 0;
		gap: 5px;
	}

	/* Feste, quadratische Groesse -> echte Kreise, kein Verzerren */
	.social-icon-circle {
		width: 44px;
		height: 44px;
		flex-shrink: 0;
		margin: 0 auto;
	}

	.social-icon-circle svg {
		width: 22px;
		height: 22px;
	}

	.social-icon-label {
		font-size: 0.55rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
		text-align: center;
	}
}

@media (max-width: 399px) {
	.social-icon-circle {
		width: 38px;
		height: 38px;
	}

	.social-icon-circle svg {
		width: 19px;
		height: 19px;
	}

	.social-icon-label {
		font-size: 0.48rem;
	}
}

/* Sehr schmale Displays (z. B. iPhone SE 1. Gen, 320px):
   Kreise nochmals kleiner, damit ein sichtbarer Abstand bleibt. */
@media (max-width: 340px) {
	.social-icon-circle {
		width: 34px;
		height: 34px;
	}

	.social-icon-circle svg {
		width: 17px;
		height: 17px;
	}

	.social-icon-label {
		font-size: 0.44rem;
	}
}


.footer-content {
	padding: 40px 20px;
}

.footer-nav {
	text-align: center;
	margin-bottom: 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}

.footer-link {
	display: inline-block;
	padding: 9px 16px;
	background: rgba(136, 136, 136, 0.82);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	color: #fff !important;
	border: 0.5px solid rgba(255, 255, 255, 0.45);
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(120, 120, 120, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Fallback: kein backdrop-filter -> deckendere Farbe */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.footer-link {
		background: rgba(136, 136, 136, 0.95);
	}
}

.footer-link:hover,
.footer-link:visited,
.footer-link:active,
.footer-link:focus {
	text-decoration: none;
	color: #fff !important;
	background: rgba(136, 136, 136, 0.82);
}


.footer-copyright {
	text-align: center;
	font-size: 13px;
	color: #666;
	padding-bottom: 10px;
}

footer a:not(.footer-link) {
	color: inherit;
}

footer a:not(.footer-link):hover {
	color: #0061c9;
}

/* ============================================================
   RESPONSIVE DESIGN
   ============================================================ */

/* TABLET / iPad (768px - 1024px)
   Faengt iPads ab, die sonst ins Desktop-Layout fallen wuerden.
   - Artikel-Grid: 2 Spalten
   - Kategorien: 4 pro Zeile (max. 2 Zeilen), Blasen schmaler */
@media (min-width: 768px) and (max-width: 1024px) {
	.articles-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	/* Hero-Bild kompakter, sitzt weiter oben */
	.custom-header-image,
	.custom-header-image img {
		max-height: 150px;
		height: 150px;
	}

	.custom-header-image img {
		padding: 10px 20px;
	}
}

/* Hero-Fallback fuer Tablet-Portrait (768-1024px), unabhaengig von Touch.
   Sichert kompakten Hero auch auf iPads, die hover/pointer nicht wie
   erwartet melden (z.B. mit angeschlossener Tastatur/Maus). */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.custom-header-image,
	.custom-header-image img {
		max-height: 100px !important;
		height: 100px !important;
	}

	.custom-header-image img {
		padding: 2px 20px !important;
	}
}

/* iPad HOCHFORMAT - unabhaengig von exakter Breite:
   Immer 4 Kategorien pro Zeile (max. 2 Zeilen), 2 Artikel-Spalten.
   orientation:portrait + Touch greift bei JEDER iPad-Breite,
   auch bei iPads breiter als 1024px. */
@media (min-width: 768px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
	.categories-nav .container {
		gap: 8px !important;
	}

	/* Exakt 4 Pillen pro Zeile (2 Zeilen bei 8 Kategorien).
	   flex: 0 0 -> feste Breite, kein Wachsen/Schrumpfen, damit
	   garantiert nur 4 nebeneinander passen.
	   Breite = (100% - 3*gap) / 4 = calc(25% - 6px) bei gap 8px. */
	.nav-category {
		flex: 0 0 calc(25% - 6px);
		max-width: calc(25% - 6px);
		min-width: 0;
		box-sizing: border-box;
		padding: 8px 6px;
		font-size: 11px;
	}

	.articles-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px;
	}

	/* Hero kompakter: Platz drueber halbiert.
	   Container niedriger (100px) + Logo oben ausgerichtet (object-position:top)
	   statt vertikal zentriert -> deutlich weniger Weissraum ueber dem Logo. */
	.custom-header-image,
	.custom-header-image img {
		max-height: 100px !important;
		height: 100px !important;
	}

	.custom-header-image img {
		padding: 2px 20px !important;
		object-position: center !important;
	}

	/* Abstand Hero -> Kategorien ~20% kleiner */
	.top-navigation-box .categories-nav {
		padding-top: 4px !important;
	}

	.top-navigation-box .categories-nav .categories-title {
		padding: 4px 20px 8px 20px !important;
	}
}

/* TABLET / iPad QUERFORMAT (Landscape, 1025px - 1366px)
   Layout bleibt wie Desktop (3 Spalten Artikel, 4 Kategorien),
   aber der Hero wirkt kleiner/kompakter (war zu gross auf iPad).
   (hover:none) + (pointer:coarse) grenzt echte Touch-iPads von
   Desktop-Monitoren mit gleicher Breite ab. */
@media (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
	.custom-header-image,
	.custom-header-image img {
		max-height: 150px;
		height: 150px;
	}

	.custom-header-image img {
		padding: 10px 20px;
	}
}

/* iPad im QUERFORMAT mit knapper Breite (z.B. iPad mini quer = 1024px):
   gap etwas reduzieren, damit alle 8 Pillen sauber in EINE Zeile passen
   statt 7+1 umzubrechen. Nur Landscape + Touch. */
@media (min-width: 1000px) and (max-width: 1100px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
	.top-navigation-box .categories-nav .container,
	.categories-nav .container {
		gap: 7px !important;
	}

	.nav-category {
		padding: 7px 16px;
	}
}

@media (max-width: 767px) {
	.top-navigation-box {
		margin: 0 0 15px 0 !important;
	}

	h1 {
		font-size: 2rem;
	}

	h2 {
		font-size: 1.5rem;
	}

	h3 {
		font-size: 1.25rem;
	}

	header {
		padding: 15px 20px;
		margin-bottom: 15px;
	}

	.categories-nav {
		padding: 10px 15px 0 15px;
	}

	.search-section {
		padding: 15px !important;
		margin: 9px 0 12px 0 !important;
	}

	.articles-grid {
		margin: 10px auto 30px auto;
	}

	.site-title {
		font-size: 24px;
		margin-bottom: 8px;
	}

	.site-description {
		font-size: 14px;
	}

	main {
		padding: 20px 6px;
	}

	article:not(.article-card) {
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.entry-title {
		font-size: 1.1rem;
	}

	footer {
		padding: 30px 20px;
		margin-top: 28px;
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	html {
		font-size: 14px;
	}

	h1 {
		font-size: 1.75rem;
	}

	h2 {
		font-size: 1.25rem;
	}

	h3 {
		font-size: 1.1rem;
	}

	.site-title {
		font-size: 20px;
	}

	.entry-title {
		font-size: 1rem;
	}

	button,
	input[type="button"],
	input[type="submit"],
	.button {
		padding: 12px 24px;
		font-size: 16px;
		width: 100%;
	}

	.footer-nav {
		gap: 5px;
		margin-bottom: 15px;
		flex-wrap: nowrap;
	}

	.footer-link {
		padding: 6px 7px;
		font-size: 8.5px;
		white-space: nowrap;
	}

	.footer-copyright {
		font-size: 11px;
	}
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.aligncenter {
	text-align: center;
}

.alignright {
	text-align: right;
}

.alignleft {
	text-align: left;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/* ============================================================
   SINGLE POST - STICKY HEADER
   ============================================================ */

.top-navigation-box {
	position: static;
	background: #fff;
	z-index: 100;
	box-shadow: none !important;
}

.top-navigation-box .categories-nav {
	padding: 6px 20px 0 20px !important;
	margin: 0 !important;
	border: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
	background: #fff !important;
}

.top-navigation-box .categories-nav::before,
.top-navigation-box .categories-nav::after {
	display: none !important;
}

.top-navigation-box .categories-nav .categories-title {
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 6px 20px 10px 20px !important;
	margin: 0 !important;
}

.top-navigation-box .categories-nav .container {
	padding: 0 20px 24px 20px !important;
	gap: 12px;
}

.top-navigation-box .search-section {
	padding: 17px !important;
	margin: 9px 0 14px 0 !important;
	border: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
}

.top-navigation-box .search-section::before,
.top-navigation-box .search-section::after {
	content: '' !important;
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}


/* ============================================================
   SHOP-PRODUKTE PLUGIN
   ============================================================ */

.entry-content .sp-product-box,
.entry-content .shop-product {
	display: grid;
	grid-template-columns: minmax(200px, 350px) 1fr minmax(150px, 250px);
	gap: 30px;
	align-items: flex-start;
	background: #f9f9f9;
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	padding: 20px;
	margin: 30px auto;
	max-width: 1100px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.entry-content .sp-image,
.entry-content .shop-product-image {
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
}

.entry-content .sp-image img,
.entry-content .shop-product-image img {
	width: 100%;
	height: auto;
	display: block;
}

.entry-content .sp-content,
.entry-content .shop-product-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.entry-content .sp-title,
.entry-content .shop-product-title {
	font-size: 20px;
	font-weight: 600;
	color: #000;
	margin: 0;
	line-height: 1.3;
}

.entry-content .sp-availability,
.entry-content .shop-product-availability {
	font-size: 13px;
	color: #666;
}

.entry-content .sp-price,
.entry-content .shop-product-price {
	font-size: 18px;
	font-weight: 600;
	color: #000;
	margin: 8px 0 0 0;
}

.entry-content .sp-price-original,
.entry-content .shop-product-original-price {
	font-size: 14px;
	color: #999;
	text-decoration: line-through;
	margin-left: 8px;
}

.entry-content .sp-discount,
.entry-content .shop-product-discount {
	color: #e74c3c;
	font-weight: 600;
	margin-left: 8px;
}

.entry-content .sp-shipping,
.entry-content .shop-product-shipping {
	font-size: 13px;
	color: #666;
	margin-top: 8px;
}

.entry-content .sp-actions,
.entry-content .shop-product-actions {
	display: flex;
	flex-direction: column;
	gap: 15px;
	align-items: flex-end;
}

.entry-content .sp-payment-logos,
.entry-content .shop-product-payment {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	align-items: flex-start;
	flex-wrap: wrap;
}

.entry-content .sp-payment-logos img,
.entry-content .shop-product-payment img {
	height: 30px;
	width: auto;
}

.entry-content .sp-shipping-info,
.entry-content .shop-product-shipping-info {
	font-size: 12px;
	color: #666;
	text-align: right;
}

.entry-content .sp-button,
.entry-content .shop-product-button,
.entry-content .sp-button a,
.entry-content .shop-product-button a {
	background: #4a90e2;
	color: #fff !important;
	padding: 12px 32px;
	border-radius: 25px;
	border: none;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	transition: background 0.2s ease;
}

.entry-content .sp-button:hover,
.entry-content .shop-product-button:hover,
.entry-content .sp-button a:hover,
.entry-content .shop-product-button a:hover {
	background: #2e5db8;
	text-decoration: none;
}

/* Responsive: Tablet */
@media (max-width: 768px) {
	.entry-content .sp-product-box,
	.entry-content .shop-product {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.entry-content .sp-actions,
	.entry-content .shop-product-actions {
		align-items: flex-start;
	}

	.entry-content .sp-payment-logos,
	.entry-content .shop-product-payment {
		justify-content: flex-start;
	}

	.entry-content .sp-shipping-info,
	.entry-content .shop-product-shipping-info {
		text-align: left;
	}
}

/* ============================================================
   AMAZON AAWP PLUGIN BOXES
   ============================================================ */

/* AAWP Container */
.entry-content .aawp {
	margin: 30px auto;
	max-width: 800px;
}

/* Kompakte horizontale Box - deckt ALTE (.aawp-product) UND MODERNE
   (.aawp-product__*) AAWP-Klassen ab. Aktuelle AAWP-Versionen nutzen
   BEM-Notation mit __ (z.B. .aawp-product__image). */
.entry-content .aawp-product {
	border: 1px solid #d8d8d8;
	border-radius: 20px;
	padding: 28px 20px 15px 20px;
	background: #f9f9f9;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	gap: 20px;
	align-items: center;
	box-shadow: 0 0 8px 1px rgba(0, 0, 0, .11);
	position: relative;
}

/* "* Affiliate-Link"-Hinweis oben rechts in der Box.
   Macht klar, dass ein Klick auf die Box zu Amazon fuehrt.
   Nutzt ::before (statt ::after), da AAWP/Plugin oft selbst ein
   ::after am .aawp-product setzt. body-Praefix erhoeht die Spezifitaet,
   damit der Hinweis zuverlaessig erscheint. */
body .entry-content .aawp-product::before {
	content: "* Diese Box ist ein Affiliate-Link";
	position: absolute;
	top: 8px;
	right: 14px;
	font-size: 11px;
	color: #999;
	font-weight: 400;
	line-height: 1;
	pointer-events: none;
	z-index: 2;
}

/* Product Image (alt: .aawp-image, modern: .aawp-product__image) */
.entry-content .aawp-image,
.entry-content .aawp-product__image {
	flex-shrink: 0;
	margin-bottom: 0;
	margin-right: 10px;
	max-width: 80px;
	width: 80px;
}

.entry-content .aawp-image img,
.entry-content .aawp-product__image img {
	max-width: 80px;
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
	object-fit: contain;
}

/* Content-Bereich rechts vom Bild (alt: .aawp-product-wrapper,
   modern: .aawp-product__content) - Titel und Preis untereinander.
   padding-top rueckt den Amazon-Text (Titel) einen Absatz tiefer. */
.entry-content .aawp-product-wrapper,
.entry-content .aawp-product__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: left;
	min-width: 0;
	padding-top: 26px;
}

/* Product Title (alt: .aawp-product-name/.aawp-title,
   modern: .aawp-product__title) */
.entry-content .aawp-product-name,
.entry-content .aawp-title,
.entry-content .aawp-product__title,
.entry-content .aawp a[href*="amazon"] {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0;
	color: #000;
	text-decoration: none;
	display: inline;
	line-height: 1.4;
}

.entry-content .aawp-product-name:hover,
.entry-content .aawp-title:hover,
.entry-content .aawp-product__title:hover,
.entry-content .aawp a[href*="amazon"]:hover {
	color: #0071e3;
	text-decoration: none;
}

/* Price Section: sichtbar erzwingen, links neben dem Button */
.entry-content .aawp-price-section,
.entry-content .aawp-price,
.entry-content .aawp-product__pricing,
.entry-content .aawp-product__price--current,
.entry-content .aawp-product__price,
.entry-content [class*="aawp"][class*="price"]:not([class*="prime"]) {
	margin: 0 !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: #000 !important;
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

/* ============================================================
   AMAZON-BOX: Preiszeile
   ------------------------------------------------------------
   Wird per JavaScript erzeugt: Preis(e) links, Kaufen-Button
   rechts, alles in einer Zeile.
   ============================================================ */
.entry-content .aawp-kaufzeile {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	/* Auf Desktop deutlich mehr Abstand nach oben, damit Preis und
	   Button tiefer in der Box sitzen. Mobil bleibt es kompakt. */
	margin: 46px 20px 0 0;
	flex-wrap: nowrap;
}

.entry-content .aawp-kaufzeile > * {
	margin: 0 !important;
	flex-shrink: 0;
}

.entry-content .mp-preis {
	display: inline-block;
	visibility: visible;
	padding: 0;
	white-space: nowrap;
	line-height: 1.3;
}

.entry-content .mp-preis-aktuell {
	font-size: 17px;
	font-weight: 600;
	color: #000;
	text-decoration: none;
}

.entry-content .mp-preis-alt {
	font-size: 15px;
	font-weight: 400;
	color: #999;
	text-decoration: line-through;
}

/* Mobil: kompakter, damit alles in EINER Zeile bleibt */
@media (max-width: 767px) {
	.entry-content .aawp-kaufzeile {
		gap: 8px;
		margin: 12px 12px 0 0;
	}

	.entry-content .mp-preis-aktuell {
		font-size: 14px;
	}

	.entry-content .mp-preis-alt {
		font-size: 13px;
	}

	.entry-content .aawp-kaufzeile .mp-kaufbutton {
		font-size: 12px !important;
		padding: 8px 14px !important;
		white-space: nowrap !important;
		gap: 7px !important;
		border-radius: 20px !important;
		display: inline-flex !important;
		align-items: center !important;
	}
}

@media (max-width: 400px) {
	.entry-content .aawp-kaufzeile {
		gap: 6px;
		margin-right: 8px;
	}

	.entry-content .mp-preis-aktuell {
		font-size: 13px;
	}

	.entry-content .mp-preis-alt {
		font-size: 12px;
	}

	.entry-content .aawp-kaufzeile .mp-kaufbutton {
		font-size: 11px !important;
		padding: 7px 11px !important;
		gap: 6px !important;
		border-radius: 18px !important;
		display: inline-flex !important;
		align-items: center !important;
	}
}

.entry-content .aawp-price-original,
.entry-content .aawp-original-price,
.entry-content .aawp-product__price--old {
	text-decoration: line-through;
	color: #999;
	font-weight: 400;
	font-size: 0.9rem;
	margin-left: 8px;
}

/* Discount Badge / Ribbon ausblenden */
.entry-content .aawp-discount,
.entry-content .aawp-product__ribbon {
	background: transparent;
	color: transparent;
	padding: 0;
	border-radius: 0;
	font-size: 0;
	display: none;
}

/* Info-Text ausblenden, damit die Box kompakt bleibt (nur Titel +
   Preis). WICHTIG: .aawp-info und .aawp-details werden NICHT komplett
   versteckt - in manchen AAWP-Versionen liegt der Preis darin und
   verschwindet dadurch mit. Stattdessen werden nur die reinen
   Beschreibungstexte ausgeblendet. */
/* Beschreibungstexte ausblenden - ABER NICHT den Preis.
   AAWP legt den Preis oft in einen Absatz im Info-Bereich;
   eine pauschale Regel auf "> p" wuerde ihn mit verstecken. */
.entry-content .aawp-product__description,
.entry-content .aawp-info > p:not([class*="price"]):not([class*="Price"]),
.entry-content .aawp-details > p:not([class*="price"]):not([class*="Price"]),
.entry-content .aawp-info .aawp-description,
.entry-content .aawp-details .aawp-description {
	display: none;
}

/* Preis in jedem Fall sichtbar halten - schlaegt eventuelle
   Ausblendungen aus Plugin- oder Theme-Regeln. */
.entry-content .aawp [class*="price"]:not([class*="prime"]),
.entry-content .aawp-price,
.entry-content .aawp-price-section,
.entry-content .aawp-product__price,
.entry-content .aawp-product__pricing {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

/* "Jetzt kaufen"-Button ANZEIGEN, dezent gestaltet, etwas Richtung Mitte */
/* Kaufen-Button im Amazon-Gelb, fest im Theme definiert.
   Verlauf von Hell nach Dunkel, dunkelgoldener Rahmen,
   abgerundete Ecken. */
.entry-content .aawp-button,
.entry-content .aawp-link,
.entry-content .aawp-product__button,
.entry-content a.aawp-button,
.entry-content .aawp a.button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px !important;
	padding: 9px 20px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #111 !important;
	background: linear-gradient(to bottom, #f9e08a 0%, #eec758 55%, #e5b93c 100%) !important;
	border: 1px solid #b8912b !important;
	border-radius: 22px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
	text-decoration: none !important;
	text-align: center !important;
	margin-top: 22px !important;
	margin-left: auto !important;
	margin-right: 20px !important;
	width: fit-content !important;
	cursor: pointer !important;
	transition: background 0.15s ease, box-shadow 0.15s ease !important;
}

.entry-content .aawp-button:hover,
.entry-content .aawp-link:hover,
.entry-content .aawp-product__button:hover,
.entry-content a.aawp-button:hover,
.entry-content .aawp a.button:hover {
	background: linear-gradient(to bottom, #f7d97a 0%, #e9bf49 55%, #dcae2f 100%) !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16) !important;
	color: #111 !important;
	text-decoration: none !important;
}

.entry-content .aawp-button:active,
.entry-content .aawp-link:active,
.entry-content a.aawp-button:active {
	background: linear-gradient(to bottom, #eec758 0%, #e5b93c 100%) !important;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18) !important;
}

/* Icon im Kaufen-Button: wird von AAWP gesteuert. Hier nur
   sicherstellen, dass es sauber NEBEN dem Text sitzt und ihn
   nicht ueberlappt. AAWP bindet es je nach Version als Element
   oder als ::before ein - beides wird abgedeckt. */
.entry-content .aawp-button i,
.entry-content .aawp-button svg,
.entry-content .aawp-button img,
.entry-content .aawp-link i,
.entry-content .aawp-link svg,
.entry-content .aawp-link img {
	position: static !important;
	flex-shrink: 0 !important;
	vertical-align: middle;
	max-height: 1.15em;
	width: auto;
	margin: 0 !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	transform: none !important;
}

/* Font-Icon per ::before in den Textfluss holen */
.entry-content .aawp-button::before,
.entry-content .aawp-link::before,
.entry-content .aawp-product__button::before {
	position: static !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	transform: none !important;
	line-height: 1 !important;
}

.entry-content .aawp-button {
	background-image: none !important;
	text-indent: 0 !important;
}

/* Responsive: Tablet */
@media (max-width: 768px) {
	.entry-content .aawp {
		max-width: 750px;
	}

	.entry-content .aawp-product {
		flex-direction: row;
		gap: 15px;
		padding: 12px 15px;
	}

	.entry-content .aawp-image img {
		max-width: 100px;
	}

	.entry-content .aawp-product-name,
	.entry-content .aawp-title,
	.entry-content .aawp a[href*="amazon"] {
		font-size: 0.9rem;
	}
}

/* Responsive: Mobile */
@media (max-width: 480px) {
	.entry-content .aawp {
		max-width: 100%;
	}

	.entry-content .aawp-product {
		flex-direction: row;
		gap: 12px;
		padding: 12px 15px;
	}

	.entry-content .aawp-image,
	.entry-content .aawp-product__image {
		margin-right: 0;
	}

	.entry-content .aawp-image img,
	.entry-content .aawp-product__image img {
		max-width: 70px;
	}
}

/* Prime-Logo NIEMALS anzeigen - in allen Varianten ausblenden */
.entry-content .aawp-prime,
.entry-content .aawp-product__prime,
.entry-content .aawp [class*="prime"],
.entry-content .aawp-product [class*="prime"],
.entry-content .aawp img[alt*="prime" i],
.entry-content .aawp img[src*="prime" i] {
	display: none !important;
}

/* ============================================================
   POST END PROMOTION BOXES
   ============================================================ */

.post-end-promotions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 30px auto;
	padding: 12px 0;
	max-width: 960px;
}

.promotion-box {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 10px;
	background: #f0f0f0;
	border-radius: 12px;
	text-decoration: none;
	transition: all 0.2s ease;
	color: #000;
}

.promotion-box:hover {
	background: #e0e0e0;
	text-decoration: none;
	transform: translateY(-2px);
}

.promotion-box-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.promotion-box-icon img {
	width: 28px;
	height: 28px;
	display: block;
}

.promotion-box-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Alle <p> innerhalb der Promotion-Box: kein Artikel-Absatzabstand */
.promotion-box-content p {
	margin: 0 !important;
	padding: 0 !important;
}

.promotion-box-title {
	font-size: 12px;
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
	letter-spacing: 0.2px;
}

/* App Box - Grün */
.promotion-box:nth-child(1) .promotion-box-title {
	color: #27ae60 !important;
}

/* Kaffeekasse Box - Orange */
.promotion-box:nth-child(2) .promotion-box-title {
	color: #e8931e !important;
}

.promotion-box-text,
.promotion-box-text-line1,
.promotion-box-text-line2 {
	font-size: 12px;
	line-height: 1.35;
	color: #333;
	margin: 0;
	font-weight: 500;
}

.promotion-box-text-line2 {
	font-weight: 400;
	color: #555;
}

/* Responsive: Tablet */
@media (max-width: 768px) {
	.post-end-promotions {
		grid-template-columns: 1fr;
		gap: 12px;
		margin: 40px auto 4px auto;
		max-width: 500px;
	}

	.promotion-box {
		padding: 16px;
	}

	.promotion-box-icon {
		width: 45px;
		height: 45px;
	}

	.promotion-box-icon img {
		width: 35px;
		height: 35px;
	}

	.promotion-box-title {
		font-size: 12px;
	}

	.promotion-box-text,
	.promotion-box-text-line1,
	.promotion-box-text-line2 {
		font-size: 13px;
	}
}


/* ============================================================
   iPHONE IM QUERFORMAT (Landscape)
   ------------------------------------------------------------
   Ein iPhone im Querformat ist breit (~844-932px), aber sehr
   niedrig (<=500px Hoehe). Damit faellt es zwischen die Stuehle:
   nicht mehr im schmalen Phone-Bereich, aber auch kein iPad.
   Diese Regeln geben ihm ein sauberes, tabletaehnliches Layout:
   zentrierter Content, 2 Spalten, Kategorien + Suche zentriert,
   Artikel-Text lesbar begrenzt, Bilder nicht ueber die volle
   Breite full-bleed.
   Der Breakpoint (max-height:500 + landscape + touch) trifft
   NUR iPhones im Querformat, keine iPads, kein Desktop.
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

	/* Container zentriert mit angenehmer Maximalbreite */
	.container {
		max-width: 760px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 0 20px !important;
	}

	/* HEADER: kompakt, Logo zentriert, nicht ueberdimensioniert */
	.custom-header-image,
	.custom-header-image img {
		max-height: 95px !important;
		height: 95px !important;
	}
	.custom-header-image img {
		padding: 4px 20px !important;
		object-fit: contain !important;
		object-position: center !important;
	}
	header {
		padding: 8px 0 !important;
		margin-bottom: 0 !important;
	}

	/* KATEGORIEN: zentriert, alle Pillen in natuerlicher Breite,
	   duerfen in 1-2 Zeilen umbrechen (genug Platz) */
	.top-navigation-box {
		margin: 0 0 8px 0 !important;
	}
	.top-navigation-box .categories-nav {
		padding-top: 6px !important;
	}
	.top-navigation-box .categories-nav .categories-title {
		font-size: 13px !important;
		padding: 6px 20px 10px 20px !important;
	}
	.categories-nav .container,
	.top-navigation-box .categories-nav .container {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 8px !important;
		padding: 0 20px 12px 20px !important;
	}
	/* Pillen IMMER 4 pro Zeile -> bei 8 Kategorien zwei Reihen (4+4).
	   flex: 0 0 -> feste Breite. Breite = (100% - 3*gap) / 4. */
	.nav-category {
		flex: 0 0 calc(25% - 6px) !important;
		max-width: calc(25% - 6px) !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		padding: 8px 6px !important;
		font-size: 12px !important;
		white-space: nowrap !important;
	}

	/* SUCHE: zentriert, begrenzte Breite, wenig Weissraum */
	.search-section,
	.top-navigation-box .search-section {
		padding: 8px 20px !important;
		margin: 4px 0 8px 0 !important;
	}
	.search-form-wrapper {
		max-width: 500px !important;
		margin: 0 auto !important;
	}

	/* STARTSEITE: 2 Spalten Artikel (breit genug) */
	.articles-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px !important;
	}

	/* ARTIKEL & SEITEN: Text lesbar zentriert, NICHT randlos.
	   Wir heben die Phone-Portrait-Sonderregeln (negatives margin,
	   full-bleed Bilder) hier bewusst wieder auf. */
	main {
		padding: 20px !important;
	}
	.single .entry-header,
	.single .entry-content,
	.page .entry-header,
	.page .entry-content {
		width: 100% !important;
		max-width: 640px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Bilder OHNE individuelle Groessenangabe laufen randlos (von
	   Displayrand zu Displayrand) - wie auf dem iPad.
	   Bilder mit Altwert ([width]/style/Klasse) behalten ihre Groesse. */
	.single .entry-content > img:not([style*="width"]):not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter),
	.single .entry-content > figure:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[style*="width"])):not(:has(> img.size-thumbnail)):not(:has(> img.size-medium)),
	.single .entry-content > .wp-block-image:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[style*="width"])):not(:has(> img.size-thumbnail)):not(:has(> img.size-medium)),
	.single .entry-content > p > img:not([style*="width"]):not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter),
	.page .entry-content > img:not([style*="width"]):not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter),
	.page .entry-content > figure:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[style*="width"])):not(:has(> img.size-thumbnail)):not(:has(> img.size-medium)),
	.page .entry-content > .wp-block-image:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[style*="width"])):not(:has(> img.size-thumbnail)):not(:has(> img.size-medium)),
	.page .entry-content > p > img:not([style*="width"]):not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.alignleft):not(.alignright):not(.aligncenter) {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		border-radius: 8px !important;
	}
	.single .entry-content > figure:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.size-large):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[width])):not(:has(> img[style*="width"])):not(:has(> img.size-thumbnail)):not(:has(> img.size-medium)):not(:has(> img.size-large)) img,
	.single .entry-content > .wp-block-image:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.size-large):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[width])):not(:has(> img[style*="width"])):not(:has(> img.size-thumbnail)):not(:has(> img.size-medium)):not(:has(> img.size-large)) img,
	.page .entry-content > figure:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.size-large):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[width])):not(:has(> img[style*="width"])):not(:has(> img.size-thumbnail)):not(:has(> img.size-medium)):not(:has(> img.size-large)) img,
	.page .entry-content > .wp-block-image:not(.is-resized):not(.size-thumbnail):not(.size-medium):not(.size-large):not(.alignleft):not(.alignright):not(.aligncenter):not(:has(> img[width])):not(:has(> img[style*="width"])):not(:has(> img.size-thumbnail)):not(:has(> img.size-medium)):not(:has(> img.size-large)) img {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		border-radius: 8px !important;
	}

	/* Individuell dimensionierte Bilder: in eingestellter Groesse, zentriert */
	.single .entry-content > figure.is-resized,
	.single .entry-content > .wp-block-image.is-resized,
	.single .entry-content > figure:has(> img[width]),
	.single .entry-content > figure:has(> img[style*="width"]),
	.page .entry-content > figure.is-resized,
	.page .entry-content > .wp-block-image.is-resized,
	.page .entry-content > figure:has(> img[width]),
	.page .entry-content > figure:has(> img[style*="width"]) {
		margin-left: auto !important;
		margin-right: auto !important;
		border-radius: 8px !important;
	}

	/* App-/Shop-/Amazon-Boxen: zentriert, begrenzte Breite */
	.post-end-promotions {
		max-width: 640px !important;
		margin: 24px auto 20px auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* FOOTER: normaler Abstand, Pillen zentriert nebeneinander */
	footer {
		margin-top: 21px !important;
		padding-top: 0 !important;
	}
	.footer-content {
		padding-top: 30px !important;
	}
	.footer-nav {
		flex-wrap: wrap !important;
		gap: 12px !important;
	}
	.footer-link {
		padding: 8px 16px !important;
		font-size: 12px !important;
	}
}


/* ============================================================
   AMAZON-BOX (AAWP) KOMPAKT - robuste Regeln
   Setzen an der aeusseren .aawp-Huelle an (die immer vorhanden ist),
   damit sie unabhaengig von den inneren Klassennamen greifen.
   Ziel: kompakte Box wie die App-Box - kleines Bild links, Titel +
   Preis + "Jetzt kaufen" rechts. Die lange Merkmalsliste (Bullets)
   wird ausgeblendet, denn sie macht die Box gross.
   ============================================================ */

/* 1. Merkmalsliste (Bullet-Points) ausblenden - jede Liste in der Box.
   Das ist der groesste Hebel: die Feature-Liste macht die Box riesig. */
.entry-content .aawp ul,
.entry-content .aawp ol,
.entry-content .aawp-product ul,
.entry-content .aawp-product ol,
.entry-content .aawp-product__description,
.entry-content .aawp-product-description,
.entry-content .aawp-description,
.entry-content .aawp-features {
	display: none !important;
}

/* 2. Produktbild klein halten - jedes Bild in der AAWP-Box */
/* Produktbild in der Box - NICHT das Icon im Kaufen-Button */
.entry-content .aawp img:not(.aawp-button img):not(.aawp-link img) {
	max-width: 90px !important;
	width: 90px !important;
	height: auto !important;
	margin: 0 !important;
	border-radius: 4px !important;
	float: none !important;
}

/* Icon im Kaufen-Button: kleine, feste Groesse */
.entry-content .aawp-button img,
.entry-content .aawp-button svg,
.entry-content .aawp-button i,
.entry-content .aawp-link img,
.entry-content .aawp-link svg,
.entry-content .aawp-link i {
	width: auto !important;
	max-width: 1.4em !important;
	height: 1.1em !important;
	max-height: 1.1em !important;
	border-radius: 0 !important;
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* 3. Box-Rahmen kompakt, horizontales Layout absichern */
.entry-content .aawp,
.entry-content .aawp-product {
	max-width: 100% !important;
}

/* 4. PREIS WIEDER EINBLENDEN - er steckt oft in der ausgeblendeten
   Liste/Struktur. Diese Regel steht NACH der Ausblend-Regel und
   gewinnt dadurch. Deckt alle gaengigen AAWP-Preis-Klassen ab.
   Das Prime-Logo bleibt ausgeblendet (separate Regel). */
.entry-content .aawp .aawp-price,
.entry-content .aawp .aawp-price-section,
.entry-content .aawp .aawp-product__price,
.entry-content .aawp .aawp-product__price--current,
.entry-content .aawp .aawp-product__pricing,
.entry-content .aawp [class*="price"]:not([class*="prime"]),
.entry-content .aawp-product [class*="price"]:not([class*="prime"]) {
	display: block !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: #000 !important;
	margin: 6px 0 0 0 !important;
}

/* Durchgestrichener Originalpreis wieder als inline daneben */
.entry-content .aawp [class*="price--old"],
.entry-content .aawp [class*="price-original"],
.entry-content .aawp [class*="original-price"] {
	display: inline !important;
	text-decoration: line-through !important;
	color: #999 !important;
	font-weight: 400 !important;
	font-size: 0.9rem !important;
	margin-left: 8px !important;
}


/* ============================================================
   APP-BOX (WP-Appbox Plugin) - Frisches Design
   ------------------------------------------------------------
   Flexbox: Icon links, Text daneben, Button rechts.
   Weisser Hintergrund, keine Linien, schwarzer Text.
   ============================================================ */

/* Aeusserer Container */
body .entry-content .wpappbox {
	background: #fff !important;
	border: none !important;
	border-radius: 20px !important;
	box-shadow: 0 0 8px 1px rgba(0, 0, 0, .11) !important;
	padding: 8px 20px 8px 8px !important;
	margin: 20px auto !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 12px !important;
	position: relative !important;
	overflow: visible !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
}

/* Innere Elemente: keine eigenen Borders/Hintergruende.
   background UND background-color getrennt, damit auch Plugin- oder
   Dark-Mode-Regeln zuverlaessig ueberschrieben werden. */
body .entry-content .wpappbox *,
body .entry-content .wpappbox *::before,
body .entry-content .wpappbox *::after {
	border: none !important;
	outline: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}

/* Button-Pseudoelement braucht seinen Hintergrund zurueck */
body .entry-content .wpappbox::after {
	background: #007aff !important;
	background-color: #007aff !important;
}

/* margin/padding im Inneren nullen */
body .entry-content .wpappbox a,
body .entry-content .wpappbox span,
body .entry-content .wpappbox br,
body .entry-content .wpappbox div {
	margin: 0 !important;
	padding: 0 !important;
}

/* Zeilenumbrueche ausblenden */
body .entry-content .wpappbox br {
	display: none !important;
}

/* Alle Texte schwarz */
body .entry-content .wpappbox,
body .entry-content .wpappbox a,
body .entry-content .wpappbox span {
	color: #000 !important;
	text-decoration: none !important;
}

/* App-Icon: links, feste Breite, kein Wachsen */
body .entry-content .wpappbox .appicon {
	order: -1 !important;
	flex: 0 0 65px !important;
	width: 65px !important;
	max-width: 65px !important;
	min-width: 65px !important;
	height: 65px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: static !important;
	overflow: visible !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Klassenunabhaengig: der Link/Container, der das Icon enthaelt.
   Greift auch, wenn das Plugin andere Klassennamen verwendet. */
body .entry-content .wpappbox > a,
body .entry-content .wpappbox > a {
	order: -1 !important;
	flex: 0 0 65px !important;
	width: 65px !important;
	min-width: 65px !important;
	height: 65px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: visible !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Jedes Bild in der App-Box: vollstaendig sichtbar, nichts abgeschnitten */
body .entry-content .wpappbox img {
	width: 65px !important;
	height: 65px !important;
	max-width: 65px !important;
	min-width: 65px !important;
	object-fit: contain !important;
	border-radius: 14px !important;
	display: block !important;
	flex-shrink: 0 !important;
}

body .entry-content .wpappbox .appicon img {
	width: 65px !important;
	height: 65px !important;
	border-radius: 14px !important;
	display: block !important;
}

/* Text-Bereich: direkt neben dem Icon, wachsend */
body .entry-content .wpappbox .applinks {
	order: 1 !important;
	flex: 1 1 auto !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	gap: 2px !important;
	min-width: 0 !important;
	text-align: left !important;
	align-self: center !important;
	position: static !important;
}

/* Schriftgroesse auf ALLE Textelemente im Namensbereich anwenden.
   Das Plugin nutzt je nach Version .appname, <strong>, <b> oder
   direkten Text - diese Regel deckt alle Varianten ab. */
body .entry-content .wpappbox .applinks,
body .entry-content .wpappbox .applinks *,
body .entry-content .wpappbox .appname,
body .entry-content .wpappbox .appname * {
	font-size: 0.55rem !important;
	line-height: 1.3 !important;
}

body .entry-content .wpappbox .appname {
	font-weight: 600 !important;
	display: block !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

/* Preis kleiner - steht nach der Sammelregel, gewinnt dadurch */
body .entry-content .wpappbox .appmeta,
body .entry-content .wpappbox .appmeta * {
	font-size: 0.46rem !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	display: block !important;
}

/* App-Store-Badge ausblenden */
body .entry-content .wpappbox .appstorebadge {
	display: none !important;
}

/* Button "Laden im App Store" per ::after */
body .entry-content .wpappbox::after {
	content: "Laden im App Store" !important;
	order: 3 !important;
	flex: 0 0 auto !important;
	margin-left: auto !important;
	display: inline-block !important;
	background: #007aff !important;
	color: #fff !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	padding: 6px 12px !important;
	border-radius: 13px !important;
	white-space: nowrap !important;
	line-height: 1.3 !important;
	align-self: center !important;
}

/* Hover-Effekt */
body .entry-content .wpappbox:hover {
	box-shadow: 0 0 12px 2px rgba(0, 0, 0, .15) !important;
}



/* ============================================================
   SCHUTZ: Bilder in Produkt-/App-/Banner-Boxen NIE randlos
   ------------------------------------------------------------
   Diese Boxen regeln ihre Bilder selbst. Steht am Dateiende,
   damit die Regel in der Kaskade gewinnt.
   ============================================================ */
.entry-content .aawp img,
.entry-content .aawp figure,
.entry-content .wpappbox img,
.entry-content .wpappbox figure,
.entry-content .shop-product img,
.entry-content .shop-product figure,
.entry-content .post-end-promotions img,
.entry-content .post-end-promotions figure,
.entry-content .artikel-banner-wrapper figure {
	width: auto !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ============================================================
   EMOJI-DARSTELLUNG
   ------------------------------------------------------------
   "Apple Color Emoji" steht an erster Stelle: Auf iPhone, iPad
   und Mac werden Emojis dadurch immer in Apple-Optik gezeigt.
   Die weiteren Eintraege sind die Systemschriften anderer
   Plattformen als Rueckfallebene.
   ============================================================ */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content blockquote,
.entry-title,
.entry-subtitle,
.article-card-title,
.article-card-subtitle {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* WordPress ersetzt Emojis standardmaessig durch Bilder von
   s.w.org. Diese Regel stellt sicher, dass solche Bilder - falls
   das Plugin aktiv bleibt - wie Text mitlaufen und nicht als
   Block dargestellt werden. */
.entry-content img.emoji,
.entry-content img.wp-smiley {
	display: inline !important;
	width: 1em !important;
	height: 1em !important;
	max-width: 1em !important;
	min-width: 0 !important;
	margin: 0 0.07em !important;
	padding: 0 !important;
	vertical-align: -0.1em !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: none !important;
}

/* Icon im Kaufen-Button: steht ganz am Ende, damit es von keiner
   vorherigen Bildregel ueberschrieben wird. */
.entry-content .aawp-button img,
.entry-content .aawp-button svg,
.entry-content .aawp-button i,
.entry-content .aawp-link img,
.entry-content .aawp-link svg,
.entry-content .aawp-link i,
.entry-content .aawp-product__button img,
.entry-content .aawp-product__button svg,
.entry-content .aawp-product__button i {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
	width: auto !important;
	max-width: 1.5em !important;
	height: 1.1em !important;
	max-height: 1.1em !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	flex-shrink: 0 !important;
	vertical-align: middle !important;
	float: none !important;
}

/* Font-Icon per ::before ebenfalls absichern */
.entry-content .aawp-button::before,
.entry-content .aawp-link::before,
.entry-content .aawp-product__button::before {
	position: static !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
	line-height: 1 !important;
}

/* Warenkorb-Symbol im Kaufen-Button.
   Wird nur eingesetzt, wenn AAWP selbst kein Icon ausgibt -
   erkennbar daran, dass der Button kein img/svg/i enthaelt. */
.entry-content .aawp-button.mp-ohne-icon::before,
.entry-content .aawp-link.mp-ohne-icon::before {
	content: "🛒";
	display: inline-block;
	font-size: 1.05em;
	line-height: 1;
	flex-shrink: 0;
	position: static;
	margin: 0;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}