/*
Theme Name:   Spice Test
Description:  template.
Author:       Yannic Lange
Version:      1.0.7
Requires at least: 6.0
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  spice-test
*/

/* ============================ BASIS / LAYOUT ============================ */
:root {
	--spice-accent: #bb2d16;
	--spice-accent-dark: #bb2d16;
	--spice-ink: #d3d3d3;
	--spice-muted: #d3d3d3;
	--spice-line: #ece3d8;
	--spice-max: 1100px;
	--ak-gruen:#0f8d16;
	--ak-bg:#ccf2ce;
	--gw-bg: #000;
	--gw-ink: #d3d3d3;
	--gw-muted: #8a7a6a;
	--gw-accent: #bb2d16;
	--gw-line: #d3d3d3;
	--gw-radius: 10px;
	--gw-max: 1100px;
	--gw-header-h: 90px;
	--t-background: rgba(30,30,30,0.95);
	--t-bg: rgba(30,30,30,0.7);
}

/* playfair-display-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/playfair-display-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/playfair-display-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  src: url('fonts/playfair-display-v40-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


.spice-product__header {
	margin-top:40px;
}
/*Suche*/
#ajaxsearchliteres1 {
	background: transparent !important;
	border-radius:12px;
}
div.asl_r .results .item {
	background:var(--t-background) !important;
	border-radius:12px;
	margin-bottom:4px !important;
	padding:12px !important;
}

div.asl_r .results .asl_res_url {
	color: var(--spice-accent) !important;
}


* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--spice-ink);
	line-height: 1.6;
	background: #fdfcfa;
	background-image:url("https://spice-test.com/wp-content/uploads/bg.webp");
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-size:cover;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* 70% schwarz */
  z-index: -1;
}
a { color: var(--spice-accent); }

img { max-width: 100%; height: auto; }

.spice-container {
	background: rgba(30,30,30,0.7);
	border-radius:12px;
	border:1px solid var(--spice-line);
}

.gw-front { max-width: 1100px; margin: 20px auto 0 auto; padding: 3rem 3rem; background: rgba(30,30,30,0.7);border-radius:12px;border:1px solid var(--spice-line); }
.gw-hero { text-align: center; }
.gw-hero__subtitle { color: #6b5b4d; font-size: 1.15rem; margin: 0; }
.gw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.gw-card { background:rgba(40,40,40,0.4); border: 1px solid #ece3d8; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(80,50,20,.06); transition: transform .15s ease, box-shadow .15s ease; }
.gw-card:hover { transform: scale(1.04); box-shadow: 0 10px 24px rgba(80,50,20,.12); }
.gw-card__link { display: block; text-decoration: none; color: inherit; }
.gw-card__media img { width: 100%; height: 180px; object-fit: cover; display: block; }
.gw-card__body { padding: 1.25rem; }
.gw-card__title { margin: 0 0 .5rem; font-size: 1.2rem; line-height: 1.3; }
.gw-card__need { margin: 0 0 .75rem; color: #fff; font-size: .9rem; }
.gw-card__pair { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 0; }
.gw-tag { padding: .25rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.gw-tag--js { background: #f1e9df; color: #7a5b3a; }
.gw-tag--ak { background: #ccf2ce; color: #0f8d16; border: 1px solid #0f8d16; }
.gw-arrow { color: #b5651d; font-weight: 700; }
.gw-empty { text-align: center; color: #6b5b4d; padding: 2rem; }


.after_content {
	margin-top:30px;
}
.after_content h2, h3 {
	margin-bottom:-10px;
}
.spice-container h2, h3 {
	margin-bottom:-10px;
	text-decoration:none !important;
}
.spice-container a {
	text-decoration:none !important;
}


h1 {
	font-size:clamp(2rem, 5vw, 2.3rem);
	 margin: 0 0 20px;
	font-family: "Playfair Display", serif;
	text-align:center;
}

.spice-container { max-width: var(--spice-max); margin: 0 auto; padding: 0 1rem; }

.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ============================ SITE-HEADER / NAV ======================== */
.site-header { border-bottom: 1px solid var(--spice-line); background: #fff; }
.site-header__inner {
	max-width: var(--spice-max); margin: 0 auto; padding: 1rem;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.site-brand { font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--spice-ink); }
.site-nav ul { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a { text-decoration: none; color: var(--spice-ink); }
.site-nav a:hover { color: var(--spice-accent); }

.site-content { padding: 10px 0 3rem; }

/* ============================ SITE-FOOTER ============================== */
.site-footer {
	border-top: 1px solid var(--spice-line); background: var(--t-bg);
	padding: 1.5rem 1rem; text-align: center; color: var(--spice-muted); font-size: .9rem;
}

/* ============================ ÜBERSICHTSSEITE ========================== */
.spice-test { max-width: var(--spice-max); margin: 0 auto; padding: 2rem 1rem; }
.spice-test__hero { text-align: center; margin-bottom: 2.5rem; }
.spice-test__subtitle { color: #6b5b4d; font-size: 1.15rem; margin: 0; }
.spice-test__intro { max-width: 720px; margin: 0 auto 3rem; line-height: 1.7; }

.spice-test__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
}
.spice-card {
	background: #fff;
	border: 1px solid var(--spice-line);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(80, 50, 20, .06);
	display: flex;
	flex-direction: column;
	transition: transform .15s ease, box-shadow .15s ease;
}
.spice-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(80, 50, 20, .12); }
.spice-card__media img { width: 100%; height: 180px; object-fit: cover; display: block; }
.spice-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.spice-card__name { margin: 0; font-size: 1.3rem; }
.spice-card__origin { margin: 0; color: var(--spice-muted); font-size: .9rem; }
.spice-card__heat { margin: 0; font-size: 1rem; }
.spice-card__heat .chili-empty { filter: grayscale(1); opacity: .3; }
.spice-card__description { margin: 0; line-height: 1.6; color: #4a4038; flex: 1; }
.spice-card__rating { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.spice-card__stars .star { font-size: 1.2rem; color: #ddd; }
.spice-card__stars .star.is-full { color: #f5a623; }
.spice-card__stars .star.is-half {
	background: linear-gradient(90deg, #f5a623 50%, #ddd 50%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.spice-card__rating-value { font-weight: 600; color: #6b5b4d; }

/* ============================ PRODUKTSEITE ============================= */
.spice-product { max-width: 820px; margin: 0 auto; padding: 0rem 1rem; }
.spice-breadcrumb { font-size: .9rem; color: var(--spice-muted); margin-bottom: 1.5rem; }
.spice-breadcrumb a { color: var(--spice-muted); text-decoration: none; }
.spice-breadcrumb a:hover { text-decoration: underline; }
.spice-product__title { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.2; margin: 0 0 .5rem; }
.spice-product__need { color: #fff; margin: 0 0 2rem;text-align:center; }
.spice-block { background:rgba(50,50,50,0.7); border: 1px solid var(--spice-line); border-radius: 14px; padding: 1.5rem; margin-bottom: 1.5rem; }
.spice-block--ak { border-color: #0f8d16; background: linear-gradient(135deg, rgba(34, 120, 54, 0.88), rgba(110, 150, 95, 0.72)); border: 1px solid rgba(180, 255, 180, 0.35);
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.spice-block--ak .spice-block__sub, .spice-block--ak p {color:#fff}
#ak-heading {color:#fff}
.spice-block__name { margin: 0 0 1rem; font-size: 1.5rem; }
.spice-block__sub { font-size: 1.05rem; margin: 1.25rem 0 .5rem; color: #fff; }
.spice-block__media { margin: 0 0 1rem; }
.spice-block__media img { width: 100%; height: auto; border-radius: 10px; display: block; }
.spice-block__media figcaption { font-size: .85rem; color: var(--spice-muted); margin-top: .4rem; }
.spice-block__text { line-height: 1.7; color: var(--spice-ink); }
.spice-stars .star { color: #ddd; font-size: 1.15rem; }
.spice-stars .star.is-full { color: #f5a623; }
.spice-stars .star.is-half { background: linear-gradient(90deg, #f5a623 50%, #ddd 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.spice-stars__val { font-weight: 600; color: #6b5b4d; margin-left: .25rem; }
.spice-btn { display: inline-block; background: linear-gradient(135deg, #0f8a28, #16b63d); color: var(--ak-bg); border:1px solid #fff;padding: .7rem 1.3rem; border-radius: 8px; text-decoration: none; font-weight: 600;transform:scale(1);transition: all 0.2s linear }
.spice-btn:hover { background: var(--ak-gruen);transform:scale(1.05);box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.spice-btn--ghost { background: transparent; color: var(--spice-accent); border: 1px solid var(--spice-accent); }
.spice-btn--ghost:hover { background: #f6ede1; }


/* FAQ */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    padding: 15px 15px;
    border: 0;
    background: var(--t-bg);
	backdrop-filter: blur(8px);
    text-align: left;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
	color:#fff;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease;
	padding:0 15px;
}

.faq-item.active .faq-answer {
    opacity: 1;
}



/* ============================ GENERISCHE SEITEN ======================== */
.page-default { max-width: 820px; margin: 0 auto; padding: 2rem 1rem; }
.page-default__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 1.5rem; }
.entry-content { line-height: 1.7; }
.error-404 { max-width: 720px; margin: 0 auto; padding: 3rem 1rem; text-align: center; }


/* =======================================================================
   header.css – Header + Navigation mit Dropdown-Submenü
   -----------------------------------------------------------------------
   - Funktioniert mit wp_nav_menu(): Untermenüs liegen in <ul class="sub-menu">.
   - Dropdown öffnet bei Hover UND bei Tastatur-Fokus (:focus-within) -> barrierearm.
   - Mobiler Hamburger ohne JavaScript (Checkbox-Trick).
   - Erwartetes Markup steht unten als Kommentar (header.php-Ausschnitt).
   ======================================================================= */

/* ----------------------------- Header-Leiste --------------------------- */
.gw-header {
	background: var(--t-bg);
	border-bottom: 1px solid var(--gw-line);
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(10px);
}
.gw-header__inner {
	max-width: var(--gw-max);
	margin: 0 auto;
	padding: 0 1rem;
	max-height: var(--gw-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.gw-header__inner img {
	max-height:80px;
	width:auto !important;
	padding:8px 0;
}
.gw-brand {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--gw-ink);
	text-decoration: none;
	white-space: nowrap;
}
.gw-brand:hover { color: var(--gw-accent); }
.gw-logo img { display: block; max-height: 40px; width: auto; }

/* ----------------------------- Navigation ----------------------------- */
.gw-nav { display: flex; align-items: center;margin-left:auto; }

/* Menü-Listen (Top-Level + Sub) */
.gw-menu,
.gw-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gw-menu { display: flex; align-items: center; gap: .25rem; }
.gw-menu li { position: relative; }

.gw-menu a {
	display: block;
	padding: .65rem .9rem;
	color: var(--gw-ink);
	text-decoration: none;
	border-radius: var(--gw-radius);
	line-height: 1.2;
	transition: background .15s ease, color .15s ease;
}
.gw-menu a:hover,
.gw-menu a:focus-visible { background: #f6ede1; color: var(--gw-accent); }

/* Aktiver Menüpunkt (WordPress vergibt diese Klassen automatisch) */
.gw-menu .current-menu-item > a,
.gw-menu .current_page_item > a,
.gw-menu .current-menu-ancestor > a { color: var(--gw-accent); font-weight: 600; }

/* Pfeil bei Punkten mit Untermenü */
.gw-menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .45em;
	height: .45em;
	margin-left: .45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-4px);
	transition: transform .2s ease;
	vertical-align: middle;
}
.footer_nav_link {
	margin:0 6px;
}
.footer_nav_link {
	text-decoration:none !important;
}
/* ----------------------------- Dropdown (Desktop) --------------------- */
@media (min-width: 783px) {
	.gw-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: var(--gw-bg);
		border: 1px solid var(--gw-line);
		border-radius: var(--gw-radius);
		box-shadow: 0 12px 28px rgba(60, 40, 15, .14);
		padding: .35rem;
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .15s ease, transform .15s ease, visibility .15s;
		z-index: 60;
	}
	/* Öffnen bei Hover oder Tastatur-Fokus innerhalb des Eintrags */
	.gw-menu .menu-item-has-children:hover > .sub-menu,
	.gw-menu .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.gw-menu .menu-item-has-children:hover > a::after,
	.gw-menu .menu-item-has-children:focus-within > a::after {
		transform: rotate(225deg) translateY(2px);
	}
	.gw-menu .sub-menu a { padding: .55rem .75rem; white-space: nowrap; }

	/* Zweite Ebene: seitlich ausklappen (Flyout) */
	.gw-menu .sub-menu .sub-menu {
		top: -.35rem;
		left: 100%;
		transform: translateX(6px);
	}
	.gw-menu .sub-menu .menu-item-has-children:hover > .sub-menu,
	.gw-menu .sub-menu .menu-item-has-children:focus-within > .sub-menu {
		transform: translateX(0);
	}
	.gw-menu .sub-menu .menu-item-has-children > a::after {
		transform: rotate(-45deg); /* Pfeil nach rechts */
	}

	/* Hamburger auf Desktop ausblenden */
	.gw-burger, .gw-nav-toggle { display: none; }
	
}

/* ----------------------------- Mobil (Hamburger) --------------------- */
.gw-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.gw-burger {
	display: none;
	width: 44px; height: 44px;
	border: 1px solid var(--gw-line);
	border-radius: var(--gw-radius);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	background: var(--gw-bg);
}
.gw-burger span,
.gw-burger span::before,
.gw-burger span::after {
	content: "";
	display: block;
	width: 22px; height: 2px;
	background: var(--gw-ink);
	position: relative;
	transition: transform .2s ease, opacity .2s ease;
}
.gw-burger span::before { position: absolute; top: -7px; }
.gw-burger span::after  { position: absolute; top: 7px; }

@media (max-width: 782px) {
	.gw-burger { display: inline-flex; }

	.gw-nav {
		position: absolute;
		left: 0; right: 0;
		top: 67px;
		background: var(--gw-bg);
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s ease;
		width:100%;
	}
	.gw-menu { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1rem 1rem;width:100%; }
	.gw-menu a { padding: .8rem .5rem; border-radius: 0; border-bottom: 1px solid var(--gw-line); }
	.gw-menu li {width:100%;}
	/* Untermenüs mobil: eingerückt, aufklappbar via Fokus/Tap */
	.gw-menu .sub-menu {
		max-height: 0;
		overflow: hidden;
		padding-left: 1rem;
		transition: max-height .2s ease;
	}
	.gw-menu .menu-item-has-children:focus-within > .sub-menu { max-height: 800px; }
	.gw-menu .sub-menu a { border-bottom: 1px dashed var(--gw-line); }

	/* Menü öffnen, wenn Checkbox aktiv */
	.gw-nav-toggle:checked ~ .gw-nav { max-height: 90vh; overflow: auto; }

	/* Burger -> X */
	.gw-nav-toggle:checked ~ .gw-burger span { background: transparent; }
	.gw-nav-toggle:checked ~ .gw-burger span::before { transform: rotate(45deg); top: 0; }
	.gw-nav-toggle:checked ~ .gw-burger span::after  { transform: rotate(-45deg); top: 0; }
	
	body::before {
	  background: rgba(0, 0, 0, 0.8); /* 70% schwarz */
	}
	/*.gw-menu .menu-item-has-children > a::after {
		position:absolute;
		top:20px;
		right:-7%;
	}*/
}

/* ----------------------------- Skip-Link ------------------------------ */
.gw-skip-link {
	position: absolute; left: -9999px; top: 0;
	background: #fff; color: var(--gw-ink);
	padding: .6rem 1rem; z-index: 100; border-radius: var(--gw-radius);
}
.gw-skip-link:focus { left: 1rem; top: 1rem; }





.gt-test { max-width: 760px; margin: 0 auto; }
 
.gt-header { text-align: center; margin-bottom: 2rem; }
.gt-logo { max-height: 80px; margin-bottom: 1rem; }
.gt-title { margin-bottom: 0.25rem; }
.gt-meta { color: #fff; font-size: 0.9rem; margin-bottom: 1rem; }
.gt-intro { font-size: 1.05rem; line-height: 1.6; }
 
.gt-score-box {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #f7f3ec;
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    margin-top: 1rem;
}
.gt-score-stars { color: #d99a2b; font-size: 1.3rem; }
.gt-score-number { font-weight: 700;color:#000 }
.gt-score-label { font-style: italic; color: #444; }
 
.gt-section { margin: 2.5rem 0; }
.gt-section h2 {
    font-size: 1.4rem;
    border-bottom: 2px solid #d99a2b;
    padding-bottom: 0.3rem;
    margin-bottom: 1rem;
}
.gt-subsection h3 { margin-bottom: 0.2rem; font-size: 1.1rem; }
 
.gt-richtext, .gt-section p { line-height: 1.6; }
 
.gt-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.gt-table th, .gt-table td {
    text-align: left;
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid #e2e2e2;
}
.gt-table-anbieter th { width: 40%; color: #fff; font-weight: 600; }
.gt-table-bewertungen thead th { background: #f7f3ec;color:#000; }
 
.gt-list { padding-left: 1.2rem; }
.gt-list li { margin-bottom: 0.3rem; }
 
.gt-pro-contra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1rem 0;
}


.faq-answer p {
	margin-top:0 !important;
}


@media (max-width: 600px) {
    .gt-pro-contra { grid-template-columns: 1fr; }
}
.gt-pro h3 { color: #16b63d; }
.gt-contra h3 { color: #c62828; }
.gt-list-pro li::marker { color: #2e7d32; }
.gt-list-contra li::marker { color: #c62828; }
 
.gt-kritikpunkt {
    background: #fdf3e3;
    border-left: 4px solid #d99a2b;
    padding: 0.8rem 1rem;
	color:#000;
}
 
.gt-bild { max-width: 100%; border-radius: 8px; margin-bottom: 1rem;color:#000; }
 
.gt-testurteil-lang {
    background: #f7f3ec;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
	color:#000;
}
 
.gt-cta { text-align: center; margin: 2.5rem 0; }
.gt-cta-button {
    display: inline-block;
    background:linear-gradient(135deg, #0f8a28, #16b63d);
    color: #fff;
    font-weight: 700;
    padding: 0.9rem 2rem;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.gt-cta-button:hover {transform:scale(1.05);box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.gt-score-stars {
    display: inline-flex;
    gap: 2px;
    font-size: 1.4rem;
    line-height: 1;
}

.gt-star {
    display: inline-block;
    position: relative;
}

.gt-star-full {
    color: #f5a623;
}

.gt-star-empty {
    color: #d8d8d8;
}

.gt-star-half {
    color: #d8d8d8;
}

.gt-star-half::before {
    content: "★";
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    overflow: hidden;
    color: #f5a623;
}

/* ============================================================
   News + Blog Aufwertung
   ============================================================ */

/* --- Beitrag: Lesbarkeit --- */
.single .entry-content{font-size:1.05rem; line-height:1.8; }


/* --- 3:2 Bildplatzhalter --- */
.img-ph{ position:relative; width:100%; aspect-ratio:3/2; margin:2rem 0; border:1px dashed #ece3d8; border-radius:14px; background:
  repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 12px, rgba(255,255,255,0.06) 12px 24px), rgba(40,40,40,0.45);
  display:flex; align-items:center; justify-content:center; }
.img-ph__label{ color:#cbb9a6; font-size:.95rem; letter-spacing:.04em; background:rgba(0,0,0,0.35); padding:.4rem .9rem; border-radius:999px; }

/* --- Infobox / Key Facts --- */
.blog-box{ background:rgba(40,40,40,0.55); border:1px solid #ece3d8; border-left:4px solid var(--gw-accent,#bb2d16);
  border-radius:12px; padding:1.15rem 1.35rem; margin:2rem 0; color:#d3d3d3; }
.blog-box__title{ display:block; margin:0 0 .6rem; color:#fff; font-weight:700; font-size:1.05rem; }
.blog-box ul{ margin:.3rem 0 0; padding-left:1.2rem; }
.blog-box li{ margin:.3rem 0; }

/* --- Hervorhebung / Zitat-Callout --- */
.blog-quote{ margin:2rem 0; padding:1.1rem 1.4rem; border-left:4px solid var(--gw-accent,#bb2d16);
  background:rgba(187,45,22,0.10); border-radius:0 12px 12px 0; font-size:1.15rem; font-style:italic; color:#efe7dc; }

/* --- Inline CTA Button im Beitrag --- */
.blog-cta{ display:inline-block; margin:.4rem 0 .2rem; padding:.7rem 1.25rem; background:var(--gw-accent,#bb2d16);
  color:#fff !important; border-radius:8px; text-decoration:none !important; font-weight:600; }
.blog-cta:hover{ filter:brightness(1.08); }
.single .entry-content a{ color:#ff7a5c; }

/* --- News Archiv: 2-spaltige Teaser-Kacheln --- */
.news-wrap{ max-width:var(--gw-max,1100px); margin:2.2rem auto 3rem; padding:0 1rem; }
.news-head{ text-align:center; margin:0 0 1.8rem; }
.news-head__title{ font-size:2rem; }
.news-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.news-card{ background:rgba(40,40,40,0.4); border:1px solid #ece3d8; border-radius:14px; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease; }
.news-card:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.35); }
.news-card__link{ display:block; text-decoration:none !important; color:inherit; }
.news-card__media{ aspect-ratio:3/2; background:rgba(20,20,20,0.6); overflow:hidden; }
.news-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.news-card__ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:#cbb9a6; font-size:.92rem; letter-spacing:.03em;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 12px, rgba(255,255,255,0.06) 12px 24px); }
.news-card__body{ padding:1.25rem 1.25rem 1.35rem; }
.news-card .news-card__title{ margin:0 0 .9rem !important; font-size:1.15rem; line-height:1.3; color:var(--gw-accent,#bb2d16); }
.news-card .news-card__excerpt{ margin:0 0 1rem !important; color:#d3d3d3; font-size:.97rem; line-height:1.6; }
.news-card__more{ display:inline-block; color:var(--gw-accent,#bb2d16); font-weight:700; font-size:.92rem; }
.news-card__more::after{ content:" \2192"; }
@media (max-width:640px){ .news-grid{ grid-template-columns:1fr; } }


/* Beitragsbilder (ACF, 3:2) */
.post-img{ margin:1.5rem 0; border-radius:14px; overflow:hidden; aspect-ratio:3/2; background:#1a1a1a; }
.post-img img{ display:block; width:100%; height:100%; object-fit:cover; }




/* Mobile Menü*/


.gw-submenu-toggle {
    display: none;
}

@media (max-width: 782px) {
	
	.gw-menu .menu-item-has-children.is-open > .sub-menu {
        max-height: 800px;
    }
    .gw-menu .menu-item-has-children > a:focus ~ .sub-menu {
        max-height: 800px;
    }
	
	.gw-menu .menu-item-has-children > a::after {
    	content: none; /* alten Pfeil am Link entfernen */
	}
    .gw-submenu-toggle {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 44px;
        height: 44px;
        background: transparent;
        border: 0;
        cursor: pointer;
    }
    .gw-submenu-toggle::after {
        content: "";
        position: absolute;
        top: 50%; left: 50%;
        width: .5em; height: .5em;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        color: var(--gw-ink);
        transform: translate(-50%, -60%) rotate(45deg);
        transition: transform .2s ease;
    }
    .menu-item-has-children.is-open > .gw-submenu-toggle::after {
        transform: translate(-50%, -40%) rotate(225deg);
    }

    .gw-menu li { position: relative; }

    /* Untermenü öffnet jetzt über .is-open statt :focus-within */
    .gw-menu .menu-item-has-children.is-open > .sub-menu {
        max-height: 800px;
    }

    .gt-table-anbieter,
    .gt-table-bewertungen {
        border: 0;
    }

    /* Kopfzeile visuell ausblenden, bleibt aber für Screenreader vorhanden */
    .gt-table-anbieter thead,
    .gt-table-bewertungen thead {
        display: none;
    }

    .gt-table-anbieter tr,
    .gt-table-bewertungen tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #e2e2e2;
        border-radius: 10px;
        overflow: hidden;
        background: rgba(40,40,40,0.4);
    }

    .gt-table-anbieter th,
    .gt-table-anbieter td,
    .gt-table-bewertungen td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        width: 100%;
        padding: .6rem .8rem;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        text-align: left;
    }

    .gt-table-anbieter tr > *:last-child,
    .gt-table-bewertungen tr > *:last-child {
        border-bottom: 0;
    }

    /* Label links anzeigen via data-label */
    .gt-table-bewertungen td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #fff;
        text-align: left;
        flex-shrink: 0;
    }

    .gt-table-anbieter th {
        text-align: left;
        font-weight: 600;
        color: #fff;
        background: transparent;
        justify-content: flex-start;
    }

    .gt-table-anbieter td {
        justify-content: flex-start;
    }	
	.gt-score-box {
		flex-direction:column;
	}
	.spice-product {
		padding-top:0 !important;
	}

}