/* =========================================================================
   Schaschlik / Grillborzer - Design System
   Marke: Schwarz, Feuerrot, Weiss (Glut/Feuer), Akzent Kaelteblau (Tiefkuehl)
   Fonts: Oswald (Headings) + Inter (Text), lokal (DSGVO)
   ========================================================================= */

:root {
	/* Warme, appetitliche Palette (abgeleitet von partyservice-grillborzer.de) */
	--sk-black: #17110c;   /* warmes Fast-Schwarz */
	--sk-black-2: #211812;
	--sk-black-3: #2b2019;
	--sk-red: #9d0208;     /* tiefes Glut-Rot */
	--sk-red-dark: #6f0206;
	--sk-ember: #e85d04;   /* Orange */
	--sk-honey: #fcbf49;   /* Honig/Glut-Gelb */
	--sk-gold: #f5a623;
	--sk-cream: #faf6ee;   /* warme Basis */
	--sk-cream-2: #f2ebdd;
	--sk-white: #ffffff;
	--sk-ice: #1e7fc2;
	--sk-text: #2a2018;    /* warmes Dunkelbraun */
	--sk-text-muted: #6b5d4d;
	--sk-text-invert: #faf6ee;
	--sk-line: rgba(0, 0, 0, 0.09);        /* auf hell */
	--sk-line-dark: rgba(255, 255, 255, 0.14); /* auf dunkel */

	/* Fonts */
	--sk-font-head: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
	--sk-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Radius / Schatten / Fluid Space */
	--sk-radius: 16px;
	--sk-radius-lg: 24px;
	--sk-shadow: 0 20px 50px -20px rgba(60, 30, 10, 0.30);
	--sk-shadow-red: 0 16px 40px -14px rgba(232, 93, 4, 0.45);
	--sk-container: 1180px;

	/* Feuer- und Glut-Verlauf */
	--sk-fire: linear-gradient(120deg, #fcbf49 0%, #e85d04 52%, #9d0208 100%);
	--sk-glow: radial-gradient(circle at 50% 60%, #fcbf49 0%, #e85d04 45%, #9d0208 100%);
}

/* Blocksy-Akzentpalette auf die Marke umstellen.
   Standard war Blau (#2872fa/#1559ed) - das erzeugte u.a. blaue Produkt-Tabs. */
:root {
	--theme-palette-color-1: #e85d04;  /* Akzent: Ember-Orange */
	--theme-palette-color-2: #9d0208;  /* Akzent dunkel: Glut-Rot */
	--theme-link-initial-color: #9d0208;
	--theme-link-hover-color: #e85d04;
}

/* Warme Creme-Basis */
html { background: var(--sk-cream); }
body.sk-brand { background: var(--sk-cream); }

/* ---------- Basis / Typografie ---------- */
body.sk-brand {
	font-family: var(--sk-font-body);
	color: var(--sk-text);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.sk-brand h1, .sk-brand h2, .sk-brand h3, .sk-brand h4, .sk-brand h5, .sk-brand h6,
.sk-brand .sk-display {
	font-family: var(--sk-font-head);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

.sk-brand h1 { font-size: clamp(2.2rem, 6vw, 4.4rem); }
.sk-brand h2 { font-size: clamp(1.7rem, 4vw, 2.9rem); }
.sk-brand h3 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); }

.sk-brand a { color: var(--sk-red); }
.sk-brand strong { font-weight: 700; }

/* Der Absatz bleibt ein ganz normaler Block und richtet sich damit exakt wie
   Ueberschrift und Fliesstext aus. Die Pill-Optik sitzt auf dem inneren <span>,
   sonst wuerde WordPress' margin-inline:auto den schmalen Block zentrieren. */
.sk-eyebrow {
	display: block;
	margin: 0 0 0.9rem;
	line-height: 1;
}
.sk-eyebrow > span {
	display: inline-block;
	font-family: var(--sk-font-head);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.78rem;
	font-weight: 600;
	color: #fff;
	max-width: 100%;
	background: var(--sk-fire);
	padding: 0.4rem 1rem;
	border-radius: 999px;
	box-shadow: var(--sk-shadow-red);
}
/* Zentriert wird ueber die Textausrichtung, der Pill folgt automatisch */
.sk-eyebrow.has-text-align-center { text-align: center; }

/* ---------- Buttons / CTA ---------- */
.sk-brand .wp-block-button__link,
.sk-btn,
.sk-brand .button.alt,
.sk-brand a.sk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	font-family: var(--sk-font-head);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 1.02rem;
	line-height: 1;
	padding: 1rem 1.9rem;
	border-radius: 999px;
	border: 0;
	background: var(--sk-fire);
	color: var(--sk-white) !important;
	box-shadow: var(--sk-shadow-red);
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
	cursor: pointer;
	text-decoration: none;
}
.sk-brand .wp-block-button__link:hover,
.sk-btn:hover,
.sk-brand a.sk-btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.05);
	box-shadow: 0 20px 46px -14px rgba(228, 24, 26, 0.7);
}
.sk-btn--ghost {
	background: transparent;
	color: var(--sk-white) !important;
	border: 2px solid rgba(255, 255, 255, 0.5);
	box-shadow: none;
}
.sk-btn--ghost:hover { border-color: var(--sk-white); background: rgba(255,255,255,0.08); }

.sk-btn__note { display: block; font-size: 0.78rem; letter-spacing: 0.04em; opacity: 0.85; margin-top: 0.5rem; text-transform: none; font-family: var(--sk-font-body); }

/* ---------- Sections ---------- */
.sk-section { padding: clamp(3rem, 7vw, 6rem) 0; }
.sk-container { max-width: var(--sk-container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.sk-on-dark { background: var(--sk-black); color: var(--sk-text-invert); }
.sk-on-dark h1, .sk-on-dark h2, .sk-on-dark h3 { color: var(--sk-white); }
.sk-on-cream { background: var(--sk-cream); }

/* ---------- Parallax ---------- */
.sk-parallax {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
	.sk-parallax { background-attachment: fixed; }
}
.sk-parallax__overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.5) 45%, rgba(10,10,10,0.82) 100%);
	pointer-events: none;
}
.sk-parallax > .sk-container { position: relative; z-index: 1; }

/* Sanfte Einblend-Animation (per JS getriggert) */
.sk-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.sk-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sk-reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Hero ---------- */
.sk-hero { position: relative; min-height: min(92vh, 820px); display: flex; align-items: center; color: var(--sk-white); overflow: hidden; }
.sk-hero__media { position: absolute; inset: 0; z-index: 0; }
.sk-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* .sk-hero::after: zusaetzliche Abdunkelung entfernt (auf Wunsch).
   Die Lesbarkeit uebernimmt allein das Overlay .sk-hero.sk-photo::before. */
.sk-hero__inner { position: relative; z-index: 2; max-width: 640px; }
.sk-hero h1 { color: #fff; margin: 0 0 1rem; }
.sk-hero p.sk-lead { font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.6; color: #f0ece6; margin: 0 0 1.8rem; max-width: 34em; }
.sk-hero__price { font-family: var(--sk-font-head); font-size: 1.15rem; color: var(--sk-ember); letter-spacing: 0.03em; margin-bottom: 1.2rem; }
.sk-hero__price s { color: rgba(255,255,255,0.55); font-weight: 400; margin-right: 0.5em; }

/* ---------- Trust / Feature-Badges ---------- */
.sk-badges { display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; align-items: center; }
.sk-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; }
.sk-badge svg { width: 22px; height: 22px; flex: 0 0 auto; }
.sk-badge--ice { color: var(--sk-ice); }

.sk-usp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.sk-usp { background: var(--sk-black-2); border: 1px solid var(--sk-line); border-radius: var(--sk-radius); padding: 1.6rem; }
.sk-usp h3 { font-size: 1.15rem; margin: 0.8rem 0 0.5rem; color: #fff; }
.sk-usp p { color: #cfc9c1; font-size: 0.96rem; margin: 0; }
.sk-usp__ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--sk-fire); color: #fff; }
.sk-usp__ico svg { width: 26px; height: 26px; }

/* ---------- Sticky Mobile Add-to-Cart ---------- */
.sk-sticky-cta {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
	display: none; align-items: center; justify-content: space-between; gap: 0.8rem;
	padding: 0.65rem 0.9rem calc(0.65rem + env(safe-area-inset-bottom));
	background: rgba(12,12,12,0.96); border-top: 1px solid var(--sk-line);
	backdrop-filter: blur(8px);
	transform: translateY(110%); transition: transform 0.3s ease;
}
.sk-sticky-cta.is-on { transform: none; }
.sk-sticky-cta__price { color: #fff; font-family: var(--sk-font-head); font-size: 1.1rem; line-height: 1.1; }
.sk-sticky-cta__price small { display: block; font-family: var(--sk-font-body); font-size: 0.7rem; color: #b9b3ab; text-transform: none; }
.sk-sticky-cta .sk-btn { flex: 0 0 auto; padding: 0.85rem 1.6rem; }
/* Auf ALLEN Geraeten sichtbar (Kundenwunsch): schlanke Leiste am unteren Rand */
.sk-sticky-cta { display: flex; }
@media (min-width: 783px) {
	.sk-sticky-cta { justify-content: center; gap: 1.6rem; padding: 0.6rem 1.5rem; }
	.sk-sticky-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
		width: 100%; max-width: var(--sk-container); margin-inline: auto; }
}
@media (max-width: 782px) {
	.sk-sticky-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%; }
	.sk-sticky-cta .sk-btn { flex: 1 1 auto; max-width: 62%; padding: 0.85rem 1rem; }
}
/* Damit die Leiste nichts verdeckt */
.sk-brand .sk-footer { padding-bottom: 5.5rem; }

/* ---------- WhatsApp Float Button ---------- */
.sk-wa {
	position: fixed; right: 16px; bottom: 84px; z-index: 899;
	width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
	background: #25d366; color: #fff; box-shadow: 0 10px 26px -8px rgba(0,0,0,0.5);
	transition: transform 0.2s ease;
}
.sk-wa:hover { transform: scale(1.06); }
.sk-wa svg { width: 30px; height: 30px; }
@media (min-width: 783px) { .sk-wa { bottom: 22px; } }

/* ---------- WooCommerce Brand ---------- */
.sk-brand .woocommerce ul.products li.product .price,
.sk-brand .woocommerce div.product p.price,
.sk-brand .woocommerce div.product span.price { color: var(--sk-red); font-family: var(--sk-font-head); font-weight: 700; }
.sk-brand .woocommerce span.onsale { background: var(--sk-fire); border-radius: 999px; font-family: var(--sk-font-head); }
.sk-brand .woocommerce .price del { color: var(--sk-text-muted); }
.sk-brand .wc-block-components-product-price { color: var(--sk-red); }

/* Grundpreis / Lieferzeit dezent */
.sk-brand .wc-gzd-additional-info,
.sk-brand .price .woocommerce-gzd-price-unit { font-size: 0.8rem; color: var(--sk-text-muted); font-family: var(--sk-font-body); }

/* Zwei Preise erklaeren: der zweite Wert ist der gesetzliche Grundpreis je Kilogramm.
   Gilt auf Produktseite, im Warenkorb und in der Kasse. */
/* Das content:"Grundpreis: " ist hier entfallen: Die Ausgabe in commerce.php
   schreibt das Wort bereits ins HTML, dadurch stand es doppelt da. Gemessen auf
   der Produktseite: Text "Grundpreis: 14,50 EUR / kg" plus ::before mit
   "Grundpreis: ". Warenkorb und Kasse haben keine solchen Elemente, es geht
   also nirgends eine Beschriftung verloren. Echter Text im HTML ist ausserdem
   markierbar und wird von Vorlesefunktionen zuverlaessig erfasst. */
.sk-brand .price-unit,
.sk-brand .woocommerce-gzd-price-unit {
	color: var(--sk-text-muted);
}
.sk-brand .price-unit { display: block; }

/* ---------- Footer ---------- */
.sk-brand .ct-footer, .sk-brand .site-footer { background: var(--sk-black); }
.sk-cookie-link { cursor: pointer; }

/* ---------- Utilities ---------- */
.sk-center { text-align: center; }
.sk-mt-1 { margin-top: 1rem; } .sk-mt-2 { margin-top: 2rem; }
.sk-max-40 { max-width: 40rem; margin-inline: auto; }

/* =========================================================================
   Header (Blocksy) - dunkel & sticky, damit das weisse Logo immer sichtbar ist
   ========================================================================= */
.sk-brand header.ct-header {
	background: var(--sk-black) !important;
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 300;
	box-shadow: 0 2px 18px -8px rgba(0,0,0,0.6);
}
/* Sticky darf durch keine ueberflow-Klammer eines Vorfahren brechen */
.sk-brand #main-container, .sk-brand .site-wrapper, .sk-brand #main, .sk-brand .ct-drawer-canvas { overflow: visible !important; }
/* Blocksy zeichnet die Header-Zeile in einem inneren div (weiss) - transparent machen,
   damit der dunkle Header durchscheint. */
.sk-brand header.ct-header > div,
.sk-brand header.ct-header > div > div,
.sk-brand header.ct-header [class*="ct-header-row"] { background-color: transparent !important; }
/* Menue-/Icon-Farben im dunklen Header.
   ALLE Link-Zustaende explizit setzen (:link/:visited/:focus/:active), sonst
   faerbt der Browser besuchte Links in seiner Standardfarbe (blau/lila). */
.sk-brand header.ct-header a,
.sk-brand header.ct-header a:link,
.sk-brand header.ct-header a:visited,
.sk-brand header.ct-header a:focus,
.sk-brand header.ct-header a:active,
.sk-brand header.ct-header .ct-menu-link,
.sk-brand header.ct-header .ct-menu-link:link,
.sk-brand header.ct-header .ct-menu-link:visited,
.sk-brand header.ct-header .menu a:link,
.sk-brand header.ct-header .menu a:visited,
.sk-brand header.ct-header [class*="ct-toggle"],
.sk-brand header.ct-header .ct-cart-item,
.sk-brand header.ct-header .ct-header-account { color: #fff !important; }
/* Hover + aktive Seite in Feuerorange. Spezifitaet MUSS ueber den :link/:visited-
   Regeln oben liegen, sonst bleibt der aktive Menuepunkt weiss. */
.sk-brand header.ct-header a:hover,
.sk-brand header.ct-header .ct-menu-link:hover,
.sk-brand header.ct-header .menu a:hover,
.sk-brand header.ct-header .menu .current-menu-item > a,
.sk-brand header.ct-header .menu .current-menu-item > a:link,
.sk-brand header.ct-header .menu .current-menu-item > a:visited,
.sk-brand header.ct-header .menu .current-menu-ancestor > a:link,
.sk-brand header.ct-header .menu .current_page_item > a:link { color: var(--sk-ember) !important; }
.sk-brand header.ct-header svg { color: #fff; fill: currentColor; }
.sk-brand header.ct-header .custom-logo { max-height: 52px; width: auto; }
/* Site-Titel/Tagline neben dem Logo ausblenden (Logo genuegt) */
.sk-brand header.ct-header .site-title,
.sk-brand header.ct-header .site-description,
.sk-brand .ct-logo-container .site-name,
.sk-brand header.ct-header [class*="site-description"] { display: none !important; }

/* Weisser Streifen zwischen Header und Hero entfernen (Content buendig) */
.sk-brand .ct-content-block > .entry-content > .alignfull:first-child,
.sk-brand.home .entry-content { margin-top: 0 !important; }
.sk-brand.home article > .entry-content > *:first-child { margin-top: 0 !important; }
.sk-brand #main, .sk-brand .ct-main, .sk-brand .site-main { padding-top: 0 !important; margin-top: 0 !important; }

/* Startseiten-Titel/Hero von Blocksy sicher ausblenden (Fallback zum Meta) */
.home .page-title,
.home .entry-header.page-hero-section,
.home .hero-section,
.sk-has-hero .page-title,
.sk-has-hero .entry-header.page-hero-section,
.sk-has-hero .hero-section { display: none !important; }
.sk-has-hero .ct-container-full { padding-top: 0 !important; }

/* Weisse Ueberschriften/Text auf dunklen & Foto-Sektionen erzwingen (gegen Blocksy) */
.sk-brand .sk-photo h1, .sk-brand .sk-photo h2, .sk-brand .sk-photo h3, .sk-brand .sk-photo h4,
.sk-brand .sk-on-dark h1, .sk-brand .sk-on-dark h2, .sk-brand .sk-on-dark h3, .sk-brand .sk-on-dark h4,
.sk-brand .sk-cta-fire h2, .sk-brand .sk-cta-fire p { color: #fff !important; }
.sk-brand .sk-photo p, .sk-brand .sk-on-dark p:not(.sk-usp-ico) { color: #ece7e0; }
.sk-brand .sk-hero .sk-lead { color: #f0ece6 !important; }

/* =========================================================================
   Startseite (Gutenberg core/group mit Hintergrundbild) - Block-basiert
   ========================================================================= */

/* Sektion mit Foto-Hintergrund + dunklem Overlay */
.sk-photo { position: relative; background-size: cover; background-position: center; color: var(--sk-text-invert); overflow: hidden; }
.sk-photo::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.55) 45%, rgba(10,10,10,0.85) 100%); pointer-events: none; }
.sk-photo > * { position: relative; z-index: 1; }
.sk-photo h1, .sk-photo h2, .sk-photo h3 { color: #fff; }
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
	.sk-photo.sk-parallax { background-attachment: fixed; }
}

/* HERO - Text sofort im sichtbaren Bereich */
.sk-hero.sk-photo { min-height: min(90vh, 820px); display: flex; align-items: center; isolation: isolate; }
.sk-hero.sk-photo::before { z-index: 0; background: linear-gradient(105deg, rgba(8,8,8,0.94) 0%, rgba(10,10,10,0.6) 46%, rgba(10,10,10,0.12) 82%); }
.sk-brand .sk-hero.sk-photo > *,
.sk-brand .sk-hero .sk-hero__inner { position: relative; z-index: 3; }
.sk-brand .sk-hero h1 { -webkit-text-fill-color: #fff !important; }
.sk-brand .sk-hero .sk-hero__inner * { position: relative; z-index: 3; }
.sk-hero .sk-hero__inner { max-width: 640px; }
.sk-hero h1 { margin: 0.2em 0 0.4em; }
.sk-hero .sk-lead { font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: #f0ece6; margin: 0 0 1.4rem; }
.sk-hero .sk-price-tag { font-family: var(--sk-font-head); font-size: 1.2rem; color: var(--sk-ember); margin-bottom: 1.2rem; }
.sk-hero .sk-price-tag small { display:block; font-family: var(--sk-font-body); font-size: 0.8rem; color:#cfc9c1; text-transform:none; }

/* Trust-Zeile unter dem Hero-CTA */
.sk-trustrow { display:flex; flex-wrap:wrap; gap: 0.6rem 1.5rem; margin-top: 1.6rem; font-size: 0.9rem; color:#eae5df; }
.sk-trustrow > * { display:flex; align-items:center; gap:0.45rem; font-weight:600; }
.sk-trustrow strong { color: var(--sk-ember); }

/* USP-Kacheln (core/columns) */
.sk-usps .wp-block-column { background: #fff; border:1px solid rgba(0,0,0,0.06); border-radius: var(--sk-radius); padding: 1.8rem 1.5rem; box-shadow: 0 12px 30px -18px rgba(60,30,10,0.25); transition: transform .2s ease, box-shadow .2s ease; }
.sk-usps .wp-block-column:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(232,93,4,0.35); }
.sk-usps h3 { font-size: 1.15rem; margin:.6rem 0 .5rem; color: var(--sk-text); }
.sk-usps p { color: var(--sk-text-muted); margin:0; font-size:.96rem; }
.sk-usps .sk-usp-ico { display:inline-grid; place-items:center; width:56px; height:56px; border-radius:16px; background: var(--sk-fire); font-size: 1.7rem; line-height:1; box-shadow: var(--sk-shadow-red); }

/* Zubereitungs-Schritte */
.sk-steps .wp-block-column { text-align:center; }
.sk-step-num { display:inline-grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--sk-fire); color:#fff; font-family:var(--sk-font-head); font-size:1.5rem; margin-bottom:.6rem; }

/* Produkt-Highlight */
.sk-producthl .wp-block-column { display:flex; flex-direction:column; justify-content:center; }
.sk-price-big { font-family:var(--sk-font-head); font-size:2.4rem; color:var(--sk-red); line-height:1; }
.sk-price-big small { font-size:1rem; color:var(--sk-text-muted); font-family:var(--sk-font-body); }

/* Final CTA (Feuer-Verlauf) */
.sk-cta-fire { background: var(--sk-fire); color:#fff; text-align:center; }
.sk-cta-fire h2, .sk-cta-fire p { color:#fff; }
.sk-cta-fire .wp-block-button__link { background:#0a0a0a; box-shadow:0 14px 40px -14px rgba(0,0,0,.6); }

/* FAQ (details/summary, barrierefrei) */
.sk-faq { max-width: 820px; margin-inline:auto; }
.sk-faq__item { border-bottom:1px solid rgba(0,0,0,.1); padding:.2rem 0; }
.sk-on-dark .sk-faq__item, .sk-photo .sk-faq__item { border-color: var(--sk-line); }
.sk-faq__q { cursor:pointer; font-family:var(--sk-font-head); font-size:1.12rem; padding:1rem 2rem 1rem 0; position:relative; list-style:none; text-transform:none; }
.sk-faq__q::-webkit-details-marker { display:none; }
.sk-faq__q::after { content:"+"; position:absolute; right:.2rem; top:.85rem; font-size:1.5rem; color:var(--sk-red); transition:transform .2s ease; }
.sk-faq__item[open] .sk-faq__q::after { content:"\2013"; }
.sk-faq__a { padding:0 0 1.1rem; color:inherit; opacity:.92; }
.sk-faq__a p { margin:.4rem 0; }

/* Hero-Headline: leichte Schatten fuer Lesbarkeit auf jedem Bildbereich */
.sk-brand .sk-hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,0.55); }
.sk-brand .sk-hero .sk-lead { text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.sk-brand .sk-trustrow { color:#f4efe9; }
.sk-brand .sk-trustrow strong { color: var(--sk-ember); }

/* Produktbild abgerundetes Rechteck statt Ellipse */
.sk-producthl .wp-block-image img,
.sk-producthl figure img { border-radius: var(--sk-radius-lg); box-shadow: var(--sk-shadow); }
.sk-producthl .wp-block-image.is-style-rounded img { border-radius: var(--sk-radius-lg) !important; }

/* =========================================================================
   Custom Footer (eigener, professioneller Footer)
   ========================================================================= */
.sk-brand .ct-footer { display: none !important; } /* Blocksy-Default aus */
.sk-footer { background: var(--sk-black); color: #cfc9c1; padding: 3.5rem 1.2rem 1.5rem; }
.sk-footer__grid { max-width: var(--sk-container); margin-inline:auto; display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
.sk-footer__pay { align-items:center; }
.sk-footer__pay .sk-badge-img { display:inline-flex; }
.sk-footer__pay .sk-badge-img svg { height:26px; width:auto; display:block; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.sk-footer h4 { color:#fff; font-size:1.05rem; margin:0 0 .9rem; }
.sk-footer a,
.sk-footer a:link,
.sk-footer a:visited,
.sk-footer a:focus { color:#cfc9c1; text-decoration:none; }
.sk-footer a:hover { color: var(--sk-ember); }
.sk-footer__brand img { height:48px; width:auto; margin-bottom:.9rem; }
.sk-footer ul { list-style:none; margin:0; padding:0; }
.sk-footer li { margin:.4rem 0; }
.sk-footer__pay { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.sk-footer__pay span { background:#1c1c1c; border:1px solid var(--sk-line); border-radius:8px; padding:.25rem .6rem; font-size:.78rem; }
.sk-footer__bottom { max-width:var(--sk-container); margin:2.2rem auto 0; padding-top:1.2rem; border-top:1px solid var(--sk-line); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:#9a948c; }
@media (max-width:782px){ .sk-footer__grid{ grid-template-columns:1fr; gap:1.6rem; } .sk-footer__bottom{ flex-direction:column; } }

/* =========================================================================
   GLUEH-/EMBER-EFFEKT (aufsteigende Glutfunken) + Audit-P1-Feinschliff
   ========================================================================= */
.hero__embers { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.ember {
	position: absolute; bottom: -20px; width: 6px; height: 6px; border-radius: 50%;
	background: radial-gradient(circle, #fcbf49 0%, #e85d04 50%, #9d0208 100%);
	box-shadow: 0 0 12px rgba(252,191,73,0.85), 0 0 28px rgba(232,93,4,0.55);
	opacity: 0;
	animation: ember-rise var(--ember-dur, 6s) linear infinite;
	animation-delay: var(--ember-delay, 0s);
	left: var(--ember-x, 50%);
}
@keyframes ember-rise {
	0%   { transform: translateY(0) scale(0.7); opacity: 0; }
	10%  { opacity: 1; }
	80%  { opacity: 0.7; }
	100% { transform: translateY(-110vh) translateX(var(--ember-drift, 0px)) scale(0.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero__embers { display: none; } }

/* Pulsierender Glut-Schein (Glühkohle) als Utility */
.sk-glow-orb { position:absolute; border-radius:50%; background: var(--sk-glow); filter: blur(40px); opacity:.55; pointer-events:none; animation: sk-glow-pulse 4.5s ease-in-out infinite; }
@keyframes sk-glow-pulse { 0%,100%{ transform:scale(1); opacity:.45; } 50%{ transform:scale(1.12); opacity:.7; } }
@media (prefers-reduced-motion: reduce){ .sk-glow-orb{ animation:none; } }

/* Hero full-bleed + Overlay staerker (Lesbarkeit auf Flammen) */
.sk-brand .sk-hero.sk-photo { overflow: hidden; min-height: clamp(560px, 72vh, 760px); }
.sk-brand .sk-hero.sk-photo::before {
	background: linear-gradient(270deg, rgba(23,17,12,0.9) 0%, rgba(23,17,12,0.62) 40%, rgba(23,17,12,0.15) 80%);
}
@media (max-width: 782px) {
	.sk-brand .sk-hero.sk-photo::before { background: linear-gradient(180deg, rgba(23,17,12,0.4) 0%, rgba(23,17,12,0.55) 45%, rgba(23,17,12,0.88) 100%); }
}
/* Hero-Preis prominent */
.sk-brand .sk-hero .sk-price-tag { font-size: 2rem; color: var(--sk-honey); font-weight: 600; margin-bottom: 1.3rem; }
.sk-brand .sk-hero .sk-price-tag small { font-size: 0.82rem; color: #e8e0d5; }

/* Feuer-CTA-Band: cremefarbener Button poppt staerker */
.sk-brand .sk-cta-fire .wp-block-button__link { background: #faf6ee !important; color: #9d0208 !important; }
.sk-brand .sk-cta-fire .wp-block-button__link:hover { background:#fff !important; }

/* Zubereitungs-Schritte: verbindende Linie */
@media (min-width: 783px) {
	.sk-steps .wp-block-columns { position: relative; }
	.sk-steps .wp-block-columns::before { content:""; position:absolute; top:27px; left:16%; right:16%; border-top:2px dashed rgba(252,191,73,0.45); z-index:0; }
	.sk-steps .wp-block-column { position: relative; z-index:1; }
}

/* Produktseite: Grundpreis optisch untergeordnet */
.sk-brand .single-product .price .woocommerce-gzd-price-unit,
.sk-brand .single-product .wc-gzd-additional-info.unit-price { font-size: 0.72rem !important; color: #7a7167 !important; font-weight: 400; }

/* Sektionsabstaende (Audit-Referenzwerte) */
@media (min-width: 783px) { .sk-brand .sk-section { padding: 80px 0; } }
@media (max-width: 782px) { .sk-brand .sk-section { padding: 48px 0; } }

/* Body-Text Lesbarkeit */
.sk-brand { font-size: 16px; line-height: 1.6; }

/* Sticky Mobile Add-to-Cart Feinschliff (Bar wird per PHP gerendert) */
.sk-sticky-cta .sk-btn { min-height: 52px; }

/* =========================================================================
   KRITISCHE HERO-FIXES (verifiziert per DOM-Inspektion)
   ========================================================================= */
/* 1) Weisser Streifen: Blocksy Content-Container-Abstand auf Startseite entfernen */
.sk-brand.home .ct-container-full { padding-top: 0 !important; padding-bottom: 0 !important; }
.sk-brand.home #main, .sk-brand.home .ct-content-block { padding-top: 0 !important; }

/* 2) Grauer Balken: kein Fixed-Attachment beim Hero (Bild muss ganze Hero-Hoehe decken) */
.sk-brand .sk-hero.sk-photo { background-attachment: scroll !important; background-size: cover !important; background-position: center !important; }

/* 3) Hero-Inhalt linksbuendig ueber den dunklen Bildbereich (bessere Lesbarkeit) */
.sk-brand .sk-hero .sk-hero__inner { margin-left: 0 !important; margin-right: auto !important; }

/* =========================================================================
   HERO REBUILD (final) - links, heller, sichtbarer Glut-Schein, CTA above fold
   ========================================================================= */
.sk-brand .sk-hero.sk-photo {
	display: flex !important; align-items: center;
	min-height: clamp(540px, 74vh, 700px) !important;
	position: relative; overflow: hidden;
	background-attachment: scroll !important; background-size: cover !important; background-position: center right !important;
	color: #fff; padding: 0 !important;
}
.sk-brand .sk-hero .sk-hero__inner {
	max-width: 1180px !important; width: 100% !important; margin: 0 auto !important; box-sizing: border-box;
	padding: clamp(2.5rem, 6vh, 4.5rem) clamp(1rem, 4vw, 2rem) !important;
	display: block; min-height: 0 !important;
}
.sk-brand .sk-hero .sk-hero__col {
	max-width: 560px !important; width: 100%; margin: 0 auto 0 0 !important;
}
/* Glow + Embers MUESSEN absolut sein (sonst schieben sie den CTA unter den Fold) */
.sk-brand .sk-hero .sk-hero__glow,
.sk-brand .sk-hero .hero__embers { position: absolute !important; }
/* Helleres, warmes Overlay - dunkelt LINKS (Content links) */
.sk-brand .sk-hero.sk-photo::before {
	content:""; position:absolute; inset:0; z-index:1;
	background: linear-gradient(90deg, rgba(20,14,10,0.86) 0%, rgba(20,14,10,0.5) 46%, rgba(20,14,10,0.05) 78%) !important;
}
@media (max-width: 782px) {
	.sk-brand .sk-hero.sk-photo::before { background: linear-gradient(180deg, rgba(20,14,10,0.35) 0%, rgba(20,14,10,0.55) 40%, rgba(20,14,10,0.9) 100%) !important; }
}
.sk-brand .sk-hero .sk-hero__inner { width: 100%; position: relative; z-index: 3; margin: 0 auto !important; padding: 2rem 1.2rem; }
.sk-brand .sk-hero .sk-hero__col { max-width: 560px; margin-right: auto !important; margin-left: 0 !important; position: relative; z-index: 3; }
.sk-brand .sk-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.02; margin: 0 0 0.6rem; }
.sk-brand .sk-hero .sk-lead { font-size: clamp(1.05rem, 2vw, 1.3rem); margin: 0 0 1.2rem; max-width: 30em; }
.sk-brand .sk-hero .sk-price-tag { margin: 0 0 1.2rem; }
.sk-brand .sk-hero .wp-block-buttons { margin-bottom: 1.1rem; }
.sk-brand .sk-hero .sk-trustrow { gap: 0.5rem 1.3rem; }
.sk-brand .sk-hero .sk-trustrow span { color: #f4efe9; font-weight: 600; font-size: 0.9rem; }

/* Sichtbarer, pulsierender Glut-Schein hinter dem Content (Gluehkohle) */
.sk-hero__glow {
	position: absolute; left: -4%; bottom: -14%; width: min(60vw, 620px); height: min(60vw, 620px);
	border-radius: 50%; z-index: 2; pointer-events: none;
	background: radial-gradient(circle, rgba(252,191,73,0.60) 0%, rgba(232,93,4,0.40) 38%, rgba(157,2,8,0.12) 62%, transparent 72%);
	filter: blur(30px); animation: sk-glow-pulse 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .sk-hero__glow { animation: none; } }

/* Ember-Funken kraeftiger/sichtbarer */
.sk-hero .hero__embers { z-index: 2; }
.sk-hero .ember { width: 8px; height: 8px; box-shadow: 0 0 14px rgba(252,191,73,0.95), 0 0 34px rgba(232,93,4,0.7); }

/* =========================================================================
   HEADER kompakter + MOBILES Offcanvas-Menue (kein Blau)
   ========================================================================= */
/* Header-Hoehe exakt wie partyservice-grillborzer.de (58px).
   Blocksy steuert die Zeilenhoehe ueber die CSS-Variable --height auf [data-row]. */
.sk-brand header.ct-header,
.sk-brand header.ct-header [data-row],
.sk-brand header.ct-header [data-row="middle"] { --height: 58px !important; --header-height: 58px !important; }
.sk-brand header.ct-header .ct-container,
.sk-brand header.ct-header [data-column] { min-height: 58px !important; }
/* 5px hoeher: 2,5px Innenabstand oben und unten */
.sk-brand header.ct-header [data-row] { padding-top: 2.5px !important; padding-bottom: 2.5px !important; }
.sk-brand header.ct-header .custom-logo { max-height: 28px !important; width: auto; }
/* Mobil etwas kompakter */
@media (max-width: 782px) {
	.sk-brand header.ct-header,
	.sk-brand header.ct-header [data-row] { --height: 54px !important; --header-height: 54px !important; }
	.sk-brand header.ct-header .ct-container,
	.sk-brand header.ct-header [data-column] { min-height: 54px !important; }
	.sk-brand header.ct-header .custom-logo { max-height: 30px !important; }
}
.sk-brand header.ct-header .ct-toggle svg,
.sk-brand header.ct-header [class*="toggle"] svg,
.sk-brand header.ct-header .ct-search-icon svg { color: #fff !important; fill: currentColor !important; }

/* Blocksy Offcanvas (mobiles Menue) dunkel + weisse Links */
.ct-panel, .ct-panel .ct-panel-inner, .ct-panel-content, #offcanvas .ct-panel-inner { background: var(--sk-black) !important; }
.ct-panel a, .ct-panel .menu a, .ct-panel-content a, .ct-panel li a { color: #fff !important; }
.ct-panel a:hover, .ct-panel .current-menu-item > a, .ct-panel .current-menu-item > a { color: var(--sk-ember) !important; }
.ct-panel .ct-toggle-close svg, .ct-panel svg { color: #fff !important; fill: currentColor !important; }
.ct-panel .menu-item { border-bottom: 1px solid var(--sk-line-dark); }

/* XL Primary-CTA (Gesehen-Gekauft) */
.sk-brand .sk-btn-xl .wp-block-button__link { font-size: 1.15rem; padding: 1.1rem 2.4rem; }

/* Eigener Cookie-Consent-Banner (unten rechts) */
.sk-consent { position: fixed; right: 18px; bottom: 18px; z-index: 9999; max-width: 400px; width: calc(100% - 36px); }
.sk-consent[hidden] { display: none; }
.sk-consent__box { background: #fff; color: var(--sk-text); border: 1px solid rgba(0,0,0,.1); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); padding: 1.3rem 1.4rem; }
.sk-consent__title { font-family: var(--sk-font-head); font-size: 1.15rem; margin: 0 0 .5rem; color: var(--sk-text); text-transform: none; }
.sk-consent__text { font-size: .9rem; line-height: 1.5; margin: 0 0 .9rem; color: var(--sk-text-muted); }
.sk-consent__text a { color: var(--sk-red); }
.sk-consent__prefs { display: flex; flex-direction: column; gap: .6rem; margin: 0 0 1rem; padding: .8rem; background: var(--sk-cream); border-radius: 10px; }
.sk-consent__prefs[hidden], .sk-consent__btn[hidden] { display: none !important; }
.sk-consent__opt { display: flex; gap: .55rem; align-items: flex-start; font-size: .82rem; line-height: 1.4; cursor: pointer; }
.sk-consent__opt input { margin-top: .15rem; }
.sk-consent__btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.sk-consent__btn { flex: 1 1 auto; font-family: var(--sk-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: .82rem; padding: .7rem .9rem; border-radius: 999px; cursor: pointer; border: 0; }
.sk-consent__btn--all { background: var(--sk-fire); color: #fff; box-shadow: var(--sk-shadow-red); }
.sk-consent__btn--save { background: var(--sk-black); color: #fff; }
.sk-consent__btn--ghost { background: transparent; color: var(--sk-text); border: 1.5px solid rgba(0,0,0,.2); }
.sk-consent__btn:hover { filter: brightness(1.05); }
.sk-consent__links { margin-top: .8rem; font-size: .78rem; color: var(--sk-text-muted); }
.sk-consent__links a { color: var(--sk-text-muted); }
@media (max-width: 600px){ .sk-consent { right: 10px; left: 10px; bottom: 10px; width: auto; max-width: none; } }

/* Aktions-Landingpage */
.sk-gifts .wp-block-column { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:var(--sk-radius); padding:1.8rem 1.5rem; box-shadow:0 12px 30px -18px rgba(60,30,10,.25); text-align:center; }
.sk-gifts .sk-usp-ico { margin:0 auto .6rem; }
.sk-gifts h3 { color:var(--sk-text); }
.sk-gifts p { color:var(--sk-text-muted); }
.sk-steps-plain ol { max-width:520px; margin:1rem auto 1.5rem; font-size:1.05rem; }
.sk-steps-plain li { margin:.5rem 0; }
.sk-wa-btn .wp-block-button__link { background:#25d366 !important; color:#fff !important; border:none !important; }

/* =========================================================================
   ÜBER UNS: Zahlenband, Gründer-Karten, Einblicke-Galerie
   ========================================================================= */
.sk-statsband { background: var(--sk-fire); color: #fff; }
.sk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center; }
@media (max-width: 720px) { .sk-stats { grid-template-columns: 1fr; gap: 1.1rem; } }
.sk-stat b { display: block; font-family: var(--sk-font-head); font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1; color: #fff; }
.sk-stat span { display: block; margin-top: .4rem; font-size: .9rem; color: rgba(255,255,255,.92); }

.sk-founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 2rem; }
@media (max-width: 720px) { .sk-founders { grid-template-columns: 1fr; } }
.sk-founder { display: flex; gap: 1.1rem; align-items: flex-start; background: var(--sk-cream);
	border: 1px solid rgba(0,0,0,.06); border-radius: var(--sk-radius); padding: 1.4rem 1.5rem; }
.sk-founder__mono { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
	background: var(--sk-fire); color: #fff; font-family: var(--sk-font-head); font-size: 1.8rem; box-shadow: var(--sk-shadow-red); }
.sk-founder b { display: block; font-size: 1.1rem; color: var(--sk-text); }
.sk-founder__role { display: block; font-size: .84rem; font-weight: 600; color: var(--sk-red); text-transform: uppercase; letter-spacing: .05em; margin: .15rem 0 .5rem; }
.sk-founder p { margin: 0; font-size: .94rem; color: var(--sk-text-muted); }

/* Instagram-Reels: Zwei-Klick-Loesung (DSGVO). Platzhalter im Markenlook,
   die Einbettung wird erst nach dem Klick von Instagram geladen. */
.sk-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.8rem; }
@media (max-width: 900px) { .sk-reels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sk-reels { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } }
.sk-reel { position: relative; aspect-ratio: 9 / 14; border-radius: var(--sk-radius-lg); overflow: hidden;
	box-shadow: 0 16px 40px -24px rgba(60,30,10,.45); background: var(--sk-black-2); }
.sk-reel.is-loaded { background: #000; }
.sk-reel iframe { width: 100%; height: 100%; border: 0; display: block; }
.sk-reel__ph {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer; font: inherit; color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center;
	padding: 1.2rem; background: linear-gradient(150deg, #2b1a10 0%, #17110c 55%, #3a1b08 100%);
	transition: filter .2s ease;
}
.sk-reel__ph:hover { filter: brightness(1.12); }
.sk-reel__ph:focus-visible { outline: 3px solid var(--sk-ember); outline-offset: -4px; }
/* Instagram-Glyph per CSS: Inline-SVG im Seiteninhalt wird von WordPress
   (KSES) beim Speichern entfernt, deshalb als Hintergrundbild. */
.sk-reel__ig {
	display: block; width: 60px; height: 60px; border-radius: 16px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.15' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"), var(--sk-fire);
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	background-size: 32px 32px, cover;
	box-shadow: var(--sk-shadow-red);
}
.sk-reel__title { font-family: var(--sk-font-head); text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; }
.sk-reel__play { display: inline-block; margin-top: .2rem; padding: .45rem 1.1rem; border-radius: 999px;
	background: rgba(255,255,255,.14); font-size: .84rem; font-weight: 600; }
.sk-reel__hint { font-size: .72rem; color: #cbbfae; max-width: 18em; line-height: 1.35; }
.sk-reels__note { margin-top: 1rem; font-size: .8rem; color: var(--sk-text-muted); text-align: center; }
.sk-reels__note a { color: var(--sk-red); }

.sk-gal3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.8rem; }
@media (max-width: 860px) { .sk-gal3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sk-gal3 { grid-template-columns: 1fr; } }
.sk-gal3 figure { margin: 0; }
.sk-gal3 img { width: 100%; height: 240px; object-fit: cover; display: block; border-radius: var(--sk-radius); box-shadow: 0 14px 34px -22px rgba(60,30,10,.4); }
.sk-gal3 figcaption { margin-top: .5rem; font-size: .84rem; color: var(--sk-text-muted); text-align: center; }
.sk-fresh__media figcaption { margin-top: .5rem; font-size: .84rem; color: var(--sk-text-muted); text-align: center; }

/* =========================================================================
   KONTAKTSEITE
   ========================================================================= */
.sk-contact-hero { background: var(--sk-fire); color: #fff; }
.sk-contact-hero h1 { color: #fff; margin: .3rem 0 .5rem; font-size: clamp(2rem, 5vw, 3rem); }
.sk-contact-hero p { color: #fff; }
/* Farbabweichung gilt dem Pill, nicht dem Absatz: der ist voll breit und
   wuerde sonst als dunkler Balken ueber die ganze Inhaltsbreite erscheinen. */
.sk-contact-hero .sk-eyebrow > span { background: rgba(0,0,0,.28); box-shadow: none; }

.sk-contact__grid { gap: clamp(1.2rem, 3vw, 2.4rem); }
.sk-card { background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: var(--sk-radius); padding: 1.4rem 1.5rem; box-shadow: 0 14px 34px -22px rgba(60,30,10,.35); }
.sk-card + .sk-card, .sk-card + .sk-card--form { margin-top: .9rem; }
.sk-card__title { font-size: 1.25rem; margin: 0 0 .4rem; color: var(--sk-text); }
.sk-card__sub { font-size: .88rem; color: var(--sk-text-muted); margin: 0; }
.sk-card--form { padding-top: 1.2rem; }
.sk-card--form .sk-cform { max-width: none; margin-top: 0; }

.sk-contact-ways { display: flex; flex-direction: column; gap: .7rem; }
.sk-cway {
	display: flex; gap: .9rem; align-items: flex-start; text-decoration: none;
	background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: var(--sk-radius);
	padding: 1rem 1.1rem; box-shadow: 0 10px 26px -20px rgba(60,30,10,.35);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.sk-cway:hover { transform: translateY(-3px); border-color: var(--sk-ember); box-shadow: 0 16px 32px -18px rgba(232,93,4,.45); }
.sk-cway__ico { font-size: 1.5rem; line-height: 1.2; flex: 0 0 auto; }
.sk-cway__txt { display: block; min-width: 0; }
.sk-cway__txt b { display: block; color: var(--sk-text); font-size: 1rem; }
.sk-cway__txt span { display: block; color: var(--sk-text-muted); font-size: .92rem; word-break: break-word; }
.sk-cway__txt em { display: inline-block; margin-top: .3rem; font-style: normal; font-size: .74rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em; color: #0d7a34; background: #e3f6e8; padding: .12rem .5rem; border-radius: 999px; }
.sk-cway--wa { border-color: rgba(37,211,102,.45); }
.sk-cway--wa .sk-cway__ico { color: #25d366; }
.sk-cway--static { cursor: default; }
.sk-cway-note { font-size: .86rem; color: var(--sk-text-muted); background: var(--sk-cream-2); border-radius: var(--sk-radius); padding: .85rem 1.1rem; }
.sk-cway-note b { display: block; color: var(--sk-text); }

@media (max-width: 782px) {
	.sk-contact__grid { flex-direction: column; }
	.sk-contact__grid .wp-block-column { flex-basis: 100% !important; }
}

/* Kontaktformular */
.sk-cform { max-width: 640px; margin-top: 1rem; }
.sk-cform .sk-cf-row { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1rem; }
.sk-cform label { font-weight: 600; font-size: .92rem; }
.sk-cform input[type=text], .sk-cform input[type=email], .sk-cform textarea {
	width: 100%; padding: .8rem .9rem; border: 1px solid rgba(0,0,0,.18); border-radius: 10px;
	font: inherit; background: #fff; color: var(--sk-text); }
.sk-cform input:focus, .sk-cform textarea:focus { outline: 3px solid rgba(232,93,4,.35); border-color: var(--sk-ember); }
.sk-cform .sk-cf-consent { font-weight: 400; font-size: .88rem; display: flex; gap: .5rem; align-items: flex-start; }
.sk-cf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.sk-cf-ok { background: #e5f2e4; color: #2f7d32; border: 1px solid #b6d8b4; padding: .9rem 1.1rem; border-radius: 10px; margin-bottom: 1rem; font-weight: 600; }
.sk-cf-err { background: #f7dedf; color: #b21f24; border: 1px solid #e6b3b5; padding: .9rem 1.1rem; border-radius: 10px; margin-bottom: 1rem; font-weight: 600; }

/* =========================================================================
   PRODUKTIONS-STORY "Handgemacht in Aachen" + Video-Lightbox
   Einheitliches quadratisches Raster aussen, natives Videoformat innen.
   ========================================================================= */
.sk-process__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; }
@media (max-width: 900px) { .sk-process__grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; } }
@media (max-width: 460px) { .sk-process__grid { grid-template-columns: 1fr; } }
.sk-step-card { text-decoration: none; }

.sk-step-card {
	position: relative; display: block; border: 0; padding: 0; cursor: pointer; text-align: left;
	background: #fff; border-radius: var(--sk-radius); overflow: hidden; font: inherit; color: inherit;
	box-shadow: 0 12px 30px -18px rgba(60,30,10,.3); transition: transform .2s ease, box-shadow .2s ease;
}
.sk-step-card:hover, .sk-step-card:focus-visible { transform: translateY(-5px); box-shadow: 0 22px 44px -18px rgba(232,93,4,.45); }
.sk-step-card:focus-visible { outline: 3px solid var(--sk-ember); outline-offset: 3px; }
.sk-step-card__media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #17110c; }
.sk-step-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.sk-step-card:hover .sk-step-card__media img { transform: scale(1.06); }
.sk-step-card__num {
	position: absolute; top: .6rem; left: .6rem; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
	display: grid; place-items: center; background: var(--sk-fire); color: #fff;
	font-family: var(--sk-font-head); font-size: 1.05rem; box-shadow: var(--sk-shadow-red);
}
.sk-step-card__play {
	position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.5) 100%);
}
.sk-step-card__play span {
	width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center;
	box-shadow: 0 8px 22px rgba(0,0,0,.35); transition: transform .2s ease;
}
.sk-step-card__play span::after { content: ""; border-left: 16px solid var(--sk-red); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.sk-step-card:hover .sk-step-card__play span { transform: scale(1.12); }
.sk-step-card__body { padding: .9rem 1rem 1.1rem; }
.sk-step-card__body h3 { font-size: 1.02rem; margin: 0 0 .25rem; color: var(--sk-text); }
.sk-step-card__body p { font-size: .86rem; line-height: 1.45; color: var(--sk-text-muted); margin: 0; }
.sk-step-card__dur { position: absolute; bottom: .55rem; right: .6rem; z-index: 2; background: rgba(0,0,0,.6); color: #fff; font-size: .72rem; padding: .12rem .45rem; border-radius: 999px; }

/* Lightbox: Video im ORIGINALFORMAT, nichts wird beschnitten */
.sk-lb { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center;
	background: rgba(10,7,5,.93); padding: clamp(1rem, 4vw, 3rem); }
.sk-lb.is-open { display: flex; }
.sk-lb__inner { position: relative; max-width: min(92vw, 1100px); max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.sk-lb video { max-width: 100%; max-height: 76vh; width: auto; height: auto; border-radius: 14px; background: #000; box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); display: block; }
.sk-lb__cap { color: #f4efe9; font-family: var(--sk-font-head); text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; text-align: center; }
.sk-lb__close, .sk-lb__nav {
	position: absolute; z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255,255,255,.14); color: #fff; font-size: 1.4rem; line-height: 1; display: grid; place-items: center;
	backdrop-filter: blur(4px); transition: background .2s ease;
}
.sk-lb__close:hover, .sk-lb__nav:hover { background: var(--sk-ember); }
.sk-lb__close { top: -8px; right: -8px; }
.sk-lb__nav--prev { left: -62px; top: 50%; transform: translateY(-50%); }
.sk-lb__nav--next { right: -62px; top: 50%; transform: translateY(-50%); }
@media (max-width: 860px) {
	.sk-lb__nav--prev { left: 4px; } .sk-lb__nav--next { right: 4px; }
	.sk-lb__close { top: -6px; right: 0; }
	.sk-lb video { max-height: 68vh; }
}

/* Frische-/Kuehlketten-Sektion mit echtem Verpackungsbild */
.sk-fresh { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 860px) { .sk-fresh { grid-template-columns: 1fr; } }
.sk-fresh__media { position: relative; border-radius: var(--sk-radius-lg); overflow: hidden; box-shadow: var(--sk-shadow); background: #17110c; }
.sk-fresh__media img { width: 100%; height: auto; display: block; }
.sk-fresh ul { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.sk-fresh li { display: flex; gap: .7rem; align-items: flex-start; margin: .7rem 0; font-size: .98rem; }
.sk-fresh li b { display: block; }
.sk-fresh li span:first-child { font-size: 1.3rem; line-height: 1.2; }

/* Frische-Sektion: heller Kontrast + Icon-Liste */
.sk-on-white { background: #fff; }
.sk-freshsec .sk-fresh__media { border-radius: var(--sk-radius-lg); overflow: hidden; box-shadow: var(--sk-shadow); }
.sk-freshsec .sk-fresh__media img { display: block; width: 100%; height: auto; }
ul.sk-fresh-list { list-style: none; margin: 1.4rem 0 0; padding: 0; }
ul.sk-fresh-list li { display: flex; gap: .8rem; align-items: flex-start; margin: .9rem 0; }
ul.sk-fresh-list li > span:first-child { font-size: 1.5rem; line-height: 1.1; flex: 0 0 auto; }
ul.sk-fresh-list li b { display: block; color: var(--sk-text); font-size: 1rem; }
ul.sk-fresh-list li > span:last-child { color: var(--sk-text-muted); font-size: .93rem; line-height: 1.5; }

/* Loop-Teaser auf der Produktseite (stumm, endlos) */
figure.sk-loop { margin: 1.2rem 0 0; padding: 0; }
figure.sk-loop video { display: block; width: 100%; height: auto; border-radius: var(--sk-radius); box-shadow: 0 14px 34px -20px rgba(60,30,10,.4); background: #17110c; }
figure.sk-loop figcaption { margin-top: .5rem; font-size: .82rem; color: var(--sk-text-muted); text-align: center; }

/* Produktvideo-Sektion */
.sk-videosec .sk-video { max-width: 900px; margin: 1.6rem auto 0; border-radius: var(--sk-radius-lg); overflow: hidden; box-shadow: var(--sk-shadow); background:#000; aspect-ratio: 16/9; }
.sk-videosec .sk-video video { display:block; width:100%; height:100%; object-fit: cover; }

/* =========================================================================
   PRODUKTSEITE: Bild komplett sichtbar (Desktop), Kaufbutton ohne Scrollen (Mobil)
   ========================================================================= */
/* Bildflaeche als gerahmte Produktkarte: Hochformat-Fotos stehen sonst
   frei in einer breiten Spalte und hinterlassen unruhige Leerraeume. */
.single-product .flexy-view {
	background: #fff;
	border: 1px solid rgba(0,0,0,.06);
	border-radius: var(--sk-radius-lg);
	box-shadow: 0 18px 44px -26px rgba(60,30,10,.38);
	display: grid;
	place-items: center;
	padding: clamp(.8rem, 2vw, 1.5rem);
	overflow: hidden;
}
.single-product .flexy-view img { border-radius: calc(var(--sk-radius) - 2px); }

/* Miniaturen mittig, einheitlich, mit Markenrahmen */
.single-product .flexy-pills ol { display: flex !important; justify-content: center; gap: .6rem; flex-wrap: wrap; width: 100% !important; margin: .9rem 0 0 !important; padding: 0 !important; }
/* Listenelemente exakt auf Bildgroesse: sonst bleibt rechts ein leerer Rahmenkasten stehen */
.single-product .flexy-pills li {
	list-style: none; margin: 0 !important; padding: 0 !important;
	width: auto !important; min-width: 0 !important; flex: 0 0 auto !important;
	border: 0 !important; outline: 0 !important; background: none !important; box-shadow: none !important;
}
.single-product .flexy-pills li::before, .single-product .flexy-pills li::after { display: none !important; }
.single-product .flexy-pills .ct-media-container {
	display: block !important; width: auto !important; padding: 0 !important;
	border: 0 !important; background: none !important; box-shadow: none !important;
}
.single-product .flexy-pills img { display: block; border-radius: 10px; border: 2px solid transparent; transition: border-color .18s ease, transform .18s ease; }
.single-product .flexy-pills li:hover img { transform: translateY(-2px); }
.single-product .flexy-pills li.active img,
.single-product .flexy-pills .active img { border-color: var(--sk-ember); }

/* Desktop: Produktbild passt vollstaendig in den sichtbaren Bereich */
@media (min-width: 783px) {
	.single-product .woocommerce-product-gallery { text-align: center; }
	.single-product .flexy-view { min-height: calc(100vh - 300px); }
	.single-product .flexy-view img,
	.single-product .woocommerce-product-gallery__image img {
		max-height: calc(100vh - 340px);
		width: auto !important;
		max-width: 100%;
		margin-inline: auto;
		object-fit: contain;
	}
	.single-product .flexy-pills img { max-height: 76px; width: auto; }
}

/* Mobil: Titel, Preis und Kaufbutton oberhalb des Falzes.
   Kurzbeschreibung wandert unter den Button. */
@media (max-width: 782px) {
	.single-product .flexy-view img,
	.single-product .woocommerce-product-gallery__image img {
		max-height: 32vh; width: auto !important; margin-inline: auto; object-fit: contain;
	}
	.single-product .flexy-view { min-height: 36vh; padding: .7rem; }
	.single-product .woocommerce-product-gallery { text-align: center; margin-bottom: .5rem; }
	.single-product .flexy-pills ol { margin-top: .6rem !important; gap: .45rem; }
	.single-product .flexy-pills img { max-height: 48px; width: auto; }

	.single-product .entry-summary { display: flex; flex-direction: column; }
	.single-product .entry-summary > .product_title { order: 1; font-size: 1.45rem !important; margin: .2rem 0 .3rem !important; }
	.single-product .entry-summary > .price:not(.price-unit) { order: 2; margin: 0 0 .2rem !important; }
	.single-product .entry-summary > .price-unit { order: 3; margin: 0 0 .2rem !important; }
	.single-product .entry-summary > .legal-price-info { order: 4; margin: 0 0 .5rem !important; }
	.single-product .entry-summary > .ct-product-add-to-cart { order: 5; margin-top: 0 !important; }
	.single-product .entry-summary > .woocommerce-product-details__short-description { order: 6; margin-top: 1rem; }
	.single-product .entry-summary > .product_meta { order: 7; }
	.single-product .entry-summary > .ct-product-divider { display: none; }
}

/* Kaufbutton-Trust (Produktseite) */
.sk-buybox-trust { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin:1rem 0 .5rem; font-size:.86rem; color: var(--sk-text-muted); }
.sk-buybox-trust span { display:inline-flex; align-items:center; gap:.35rem; font-weight:600; }

/* Checkout Pflicht-Checkboxen */
.sk-checkout-legal { margin:1rem 0; padding:1rem 1.2rem; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px; }
.sk-checkout-legal .form-row { margin:.4rem 0; }
.sk-checkout-legal label { font-size:.9rem; line-height:1.4; color: var(--sk-text); }
.sk-checkout-legal .required { color: var(--sk-red); }

/* Mobile: CTA nie ueber volle Breite quetschen, sondern angenehm */
@media (max-width: 600px) {
	.sk-brand .wp-block-button__link, .sk-btn { width: auto; max-width: 100%; }
	.sk-hero .sk-hero__inner { max-width: 100%; }
	.sk-hero.sk-photo { min-height: 86vh; }
	.sk-trustrow { gap:.5rem 1rem; font-size:.82rem; }
}

/* ---------- Aktionsseite: Geschenkwahl ---------- */
.sk-gifts .sk-sub { color: var(--sk-text-muted); max-width: 46rem; margin: .4rem auto 0; }
.sk-gift-choice { margin-top: 2.2rem; }
.sk-gift-choice__grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }
.sk-gift-card {
	position: relative; display: flex; flex-direction: column; text-align: center;
	background: #fff; border: 2px solid rgba(0,0,0,.07); border-radius: var(--sk-radius-lg);
	padding: 2.4rem 1.6rem 1.8rem; box-shadow: 0 18px 44px -26px rgba(60,30,10,.4);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sk-gift-card:hover { transform: translateY(-3px); box-shadow: 0 26px 56px -26px rgba(60,30,10,.5); }
.sk-gift-card.is-active { border-color: var(--sk-ember); box-shadow: 0 0 0 4px rgba(232,93,4,.14), 0 26px 56px -26px rgba(60,30,10,.5); }
.sk-gift-card.is-active::after {
	content: "✓ aktiv"; position: absolute; top: 1rem; right: 1rem;
	font-family: var(--sk-font-head); font-size: .74rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: #fff; background: var(--sk-ember);
	padding: .3rem .65rem; border-radius: 999px;
}
.sk-gift-card__badge {
	position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
	font-family: var(--sk-font-head); font-size: .76rem; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: #fff; background: var(--sk-black);
	padding: .38rem .95rem; border-radius: 999px; white-space: nowrap;
}
.sk-gift-card__icon { font-size: 2.1rem; line-height: 1; display: block; margin-bottom: .35rem; }
.sk-gift-card__title { margin: 0 0 .45rem; font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.08; color: var(--sk-red); }
.sk-gift-card__text { color: var(--sk-text-muted); margin: 0 0 .8rem; font-size: .85rem; line-height: 1.5; }
.sk-gift-card__price { display: block; margin-top: .55rem; font-family: var(--sk-font-head); font-weight: 700; font-size: 1.18rem; color: var(--sk-text); }
.sk-gift-card__price s { color: var(--sk-text-muted); font-weight: 400; font-size: .9em; }
.sk-gift-card__price .woocommerce-Price-amount { white-space: nowrap; }
/* Die Details stehen als Fussnote unter den Karten, in der Karte nur der Verweis */
.sk-gift-card__title sup { font-size: .45em; vertical-align: super; color: var(--sk-ember); margin-left: .12em; font-weight: 700; }
.sk-gift-card__text { margin-bottom: 1.3rem; }
.sk-gift-card__cta { margin-top: auto; align-self: center; }
.sk-gift-card .sk-btn--ghost { color: var(--sk-text) !important; border-color: rgba(23,17,12,.35); }
.sk-gift-card .sk-btn--ghost:hover { border-color: var(--sk-black); background: rgba(23,17,12,.05); }
.sk-gift-choice__hint { text-align: center; margin: 1.6rem 0 0; font-size: .88rem; color: var(--sk-text-muted); }
.sk-finetext { font-size: .8rem; line-height: 1.6; color: var(--sk-text-muted); margin-top: 1.6rem; }

/* Ablauf-Schritte */
.sk-how { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: sk-how; }
.sk-how__item { position: relative; background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: var(--sk-radius); padding: 2.2rem 1.4rem 1.4rem; box-shadow: 0 12px 30px -20px rgba(60,30,10,.3); }
.sk-how__num { position: absolute; top: -.9rem; left: 1.4rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--sk-fire); color: #fff; font-family: var(--sk-font-head); font-weight: 700; box-shadow: var(--sk-shadow-red); }
.sk-how__title { margin: 0 0 .35rem; font-size: 1.06rem; color: var(--sk-text); }
.sk-how__item p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--sk-text-muted); }

/* Geschenk-Kennzeichnung im Warenkorb */
.sk-gift-tag { display: block; margin-top: .35rem; font-size: .8rem; font-weight: 600; line-height: 1.35; color: var(--sk-red); }
/* Erklaerung, warum ein Gutschein die Geschenkpackung nicht noch einmal
   rabattiert. Bewusst zurueckhaltender als die rote Geschenkzeile darueber:
   Es ist ein Hinweis, keine Warnung. Erscheint nur, wenn ein Gutschein im
   Korb liegt. */
.sk-gift-nocoupon {
	display: block;
	margin-top: .3rem;
	font-size: .78rem;
	font-weight: 400;
	line-height: 1.4;
	color: #6b675f;
}
body.sk-checkout #order_review .sk-gift-nocoupon,
.woocommerce-checkout-review-order-table .sk-gift-nocoupon {
	font-size: .72rem;
	white-space: normal;
}

/* Mindestbestellmenge */
.sk-minqty { margin: .2rem 0 .8rem; font-size: .88rem; font-weight: 600; line-height: 1.4; color: var(--sk-red); }
.sk-minqty.is-ok { color: #2f7a34; }
.sk-minqty-block { margin: .6rem 0 0; font-size: .9rem; font-weight: 600; color: var(--sk-red); text-align: center; }
/* Unterhalb der Mindestbestellmenge bleiben die Express-Knoepfe SICHTBAR,
   sind aber nicht bedienbar (Wunsch der Kundin, 14.09.2026).

   Angehaengt an .sk-minqty-block statt an den <body>: Der Hinweis und die
   Knoepfe sind Geschwister in .wc-proceed-to-checkout, und genau dieser Block
   wird beim Mengen-Update per AJAX neu geliefert. Eine Kennzeichnung am <body>
   blieb dagegen stehen - die Knoepfe waren erst nach einem Neuladen wieder
   bedienbar (gemeldet und nachgestellt am 14.09.2026). Verschwindet der
   Hinweis, greift auch diese Regel nicht mehr - ohne ein Byte JavaScript.

   Der eigentliche Schutz liegt serverseitig: sk_min_qty_check (klassisch),
   sk_min_qty_storeapi (Block/Store-API), sk_min_qty_kasse (Kassenverarbeitung).
   pointer-events allein waere umgehbar. */
.sk-minqty-block ~ #wc-stripe-express-checkout-element,
.sk-minqty-block ~ .ppc-button-wrapper,
.sk-minqty-block ~ [id^="ppc-button"] {
	pointer-events: none;
	opacity: .4;
	filter: grayscale(100%);
	cursor: not-allowed;
	user-select: none;
}

/* WooCommerce-Hinweise sind Flex-Container (Icon + Text). Flex blockifiziert
   JEDES direkte Kind, deshalb bricht ein <strong> den Satz um und die
   Leerzeichen verschwinden optisch. Loesung: der Text steckt in einem einzigen
   <span class="sk-note">, damit nur dieses Span ein Flex-Item ist. */
.woocommerce-info .sk-note,
.woocommerce-message .sk-note,
.woocommerce-error .sk-note,
.woocommerce-notices-wrapper .sk-note { display: block; }
.woocommerce-info .sk-note strong, .woocommerce-info .sk-note b,
.woocommerce-message .sk-note strong, .woocommerce-message .sk-note b,
.woocommerce-error .sk-note strong, .woocommerce-error .sk-note b { display: inline; }

/* ---------- Shop-Uebersicht (/shop/) ---------- */
/* Blocksys grauer Standardkopf weicht dem eigenen Hero */
.sk-shop .hero-section { display: none !important; }
.sk-shop .ct-container > section > .woocommerce-products-header { display: none; }

/* Kein Banner mehr: die Shop-Seite startet direkt mit dem Produkt.
   Nur eine schlichte Ueberschrift bleibt, jede Seite braucht genau eine H1. */
.sk-shop-head { margin: 0 0 clamp(1.2rem, 3vw, 2rem); }
.sk-shop-head__title {
	margin: 0;
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	line-height: 1.1;
	color: var(--sk-text);
}

/* Einzelnes Produkt: breite Karte statt schmaler Rasterspalte.
   Wichtig: row-gap MUSS 0 bleiben. Das Bild spannt ueber viele Rasterzeilen,
   ein row-gap wuerde sich pro leerer Zeile addieren und die Karte aufblaehen. */
.sk-shop-solo ul.products { display: block !important; margin: 0 !important; }
.sk-shop-solo ul.products li.product {
	width: 100% !important; float: none !important; margin: 0 !important; clear: both;
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	column-gap: clamp(1.4rem, 3vw, 2.8rem);
	row-gap: 0;
	align-items: start;
	align-content: start;
	text-align: left;
	background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--sk-radius-lg);
	padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: 0 20px 50px -30px rgba(60,30,10,.45);
}
.sk-shop-solo ul.products li.product > figure {
	grid-column: 1; grid-row: 1 / span 12; align-self: start; margin: 0; order: 0;
}
.sk-shop-solo ul.products li.product > figure img {
	width: 100%; height: auto; display: block; border-radius: var(--sk-radius);
	aspect-ratio: 1 / 1; object-fit: cover;
}
.sk-shop-solo ul.products li.product > *:not(figure) { grid-column: 2; margin-left: 0; margin-right: 0; }

/* Lesereihenfolge in der rechten Spalte: Titel, Preis, Grundpreis, Text, Vorteile, Kauf */
.sk-shop-solo .woocommerce-loop-product__title { order: 1; margin: 0 0 .5rem !important; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1; }
.sk-shop-solo .woocommerce-loop-product__title a { color: var(--sk-text) !important; }
.sk-shop-solo li.product span.price { order: 2; font-family: var(--sk-font-head); font-size: 1.8rem; font-weight: 700; color: var(--sk-red); display: block; margin: 0 0 .1rem; }
.sk-shop-solo li.product .price-unit { order: 3; font-size: .88rem; color: var(--sk-text-muted); margin: 0 0 .9rem; }
.sk-shop-card__text { order: 4; margin: 0 0 .9rem; color: var(--sk-text-muted); line-height: 1.6; font-size: .96rem; }
.sk-shop-card__usp { order: 5; list-style: none; margin: 0 0 1.3rem; padding: 0; }
.sk-shop-card__usp li { position: relative; padding-left: 1.5rem; margin: .32rem 0; font-size: .92rem; }
.sk-shop-card__usp li::before { content: "✓"; position: absolute; left: 0; color: var(--sk-ember); font-weight: 700; }
.sk-shop-solo li.product .ct-woo-card-actions { order: 6; margin: 0 0 .9rem; }
.sk-shop-solo li.product .entry-meta { display: none !important; }
.sk-shop-solo li.product .tax-info { order: 7; }
.sk-shop-solo li.product .shipping-costs-info { order: 8; }
.sk-shop-solo li.product .product-units-wrapper { order: 9; }
.sk-shop-card__note { order: 10; margin: .8rem 0 0; font-size: .84rem; font-weight: 600; color: var(--sk-red); }
.sk-shop-solo li.product .wc-gzd-additional-info { font-size: .8rem; color: var(--sk-text-muted); margin: .12rem 0; }

/* Kaufbutton als echte Haupt-CTA */
.sk-shop-solo li.product .ct-woo-card-actions .button,
.sk-shop-solo li.product a.add_to_cart_button,
.sk-shop-solo li.product a.ajax_add_to_cart {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--sk-font-head); font-weight: 600; text-transform: uppercase;
	letter-spacing: .05em; font-size: 1rem; line-height: 1;
	padding: 1rem 1.9rem; border-radius: 999px; border: 0;
	background: var(--sk-fire); color: #fff !important; box-shadow: var(--sk-shadow-red);
	transition: transform .18s ease, filter .18s ease;
}
.sk-shop-solo li.product .ct-woo-card-actions .button:hover { transform: translateY(-2px); filter: brightness(1.05); }

@media (max-width: 782px) {
	.sk-shop-solo ul.products li.product { grid-template-columns: 1fr; text-align: center; }
	.sk-shop-solo ul.products li.product > figure { grid-row: auto; grid-column: 1; margin-bottom: 1.2rem; }
	.sk-shop-solo ul.products li.product > *:not(figure) { grid-column: 1; }
	.sk-shop-card__usp { display: inline-block; text-align: left; }
	.sk-shop-hero__facts { justify-content: center; }
	.sk-shop-hero__inner { text-align: center; margin-inline: auto; }
}

/* Vertrauensbereich unter der Karte */
.sk-shop-trust { margin: clamp(2.4rem, 5vw, 3.6rem) 0 0; }
.sk-shop-trust__title { text-align: center; margin: 0 0 1.6rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.sk-shop-trust__grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.sk-shop-trust__item { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--sk-radius); padding: 1.5rem 1.3rem; box-shadow: 0 12px 30px -22px rgba(60,30,10,.35); }
.sk-shop-trust__item > span { font-size: 1.8rem; line-height: 1; display: block; margin-bottom: .5rem; }
.sk-shop-trust__item h3 { margin: 0 0 .35rem; font-size: 1.04rem; }
.sk-shop-trust__item p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--sk-text-muted); }
.sk-shop-trust__links { text-align: center; margin: 1.6rem 0 0; font-size: .94rem; }
.sk-shop-trust__links a { color: var(--sk-red); font-weight: 600; }

/* ---------- Unterseiten-Heros: Helligkeit wie im Original ---------- */
/* 1:1 das Overlay vom Hero auf partyservice-grillborzer.de: warmer Glutschimmer
   oben links plus ein deutlich hellerer Verlauf als unser Standard-.sk-photo.
   Die Startseite bleibt ausgenommen, dort braucht der Text links mehr Abdunklung. */
.sk-brand .sk-about-hero.sk-photo::before,
.sk-brand .sk-lp-hero.sk-photo::before,
.sk-brand .sk-contact-hero.sk-photo::before {
	background:
		radial-gradient(at 0% 0%, rgba(232, 93, 4, .25), rgba(0, 0, 0, 0) 55%),
		linear-gradient(180deg, rgba(26, 20, 16, .30) 0%, rgba(26, 20, 16, .45) 50%, rgba(26, 20, 16, .75) 100%) !important;
}
/* Weicher Textschatten haelt Schrift auch ueber hellen Flammen lesbar */
.sk-brand .sk-about-hero h1, .sk-brand .sk-about-hero .sk-lead,
.sk-brand .sk-lp-hero h1, .sk-brand .sk-lp-hero .sk-lead,
.sk-brand .sk-contact-hero h1, .sk-brand .sk-contact-hero .sk-lead { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }

/* Kein margin-Override mehr noetig: der Absatz ist ein normaler Block voller
   Breite, die Pill-Optik sitzt auf dem inneren <span>. Ein margin-left:0 wuerde
   den Absatz sogar aus der Inhaltsspalte an den Containerrand schieben. */

/* ---------- Aktionszeile ganz oben ---------- */
.sk-promo {
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap; gap: .4rem .75rem;
	padding: .3rem 1.1rem;
	background: var(--sk-fire);
	color: #fff !important;
	text-decoration: none;
	font-size: .8rem; line-height: 1.25;
	text-align: center;
	position: relative; z-index: 100;
}
.sk-promo:hover { filter: brightness(1.06); }
.sk-promo__flag {
	font-family: var(--sk-font-head); font-weight: 700; text-transform: uppercase;
	letter-spacing: .09em; font-size: .66rem;
	background: rgba(0, 0, 0, .3); border-radius: 999px; padding: .12rem .6rem;
	white-space: nowrap;
}
.sk-promo__text strong { font-weight: 700; }
.sk-promo__cta {
	font-family: var(--sk-font-head); font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; font-size: .68rem;
	background: #fff; color: var(--sk-red) !important;
	border-radius: 999px; padding: .18rem .75rem; white-space: nowrap;
}
@media (max-width: 720px) {
	.sk-promo { font-size: .74rem; padding: .26rem .7rem; gap: .3rem .5rem; }
	.sk-promo__cta { display: none; }
}

/* Menuepunkt "Aktion" hervorheben.
   Blocksy gibt dem Link die volle Zeilenhoehe (58px); mit border-radius wuerde
   daraus eine hohe Ellipse. Deshalb auf Inhaltshoehe schrumpfen und im Flex-
   Elternelement mittig ausrichten. */
.sk-brand header.ct-header .menu .sk-nav-aktion > a,
.sk-brand header.ct-header .menu .sk-nav-aktion > a:link,
.sk-brand header.ct-header .menu .sk-nav-aktion > a:visited {
	color: #fff !important;
	background: var(--sk-fire);
	border-radius: 999px;
	height: auto !important;
	min-height: 0 !important;
	align-self: center;
	padding: .5rem .95rem;
	line-height: 1;
	box-shadow: var(--sk-shadow-red);
}
.sk-brand header.ct-header .menu .sk-nav-aktion > a:hover { filter: brightness(1.08); }
.sk-brand #offcanvas .menu .sk-nav-aktion > a,
.sk-brand .ct-panel .menu .sk-nav-aktion > a {
	color: var(--sk-honey) !important; font-weight: 700;
}

/* CTA im Frische-Abschnitt der Startseite */
.sk-freshsec .wp-block-buttons { margin-top: 1.6rem; }
.sk-fresh__note { margin-top: .7rem; font-size: .82rem; color: var(--sk-text-muted); }

/* Ablauf mit nur zwei Schritten: breitere Karten, mittig begrenzt */
.sk-how--duo { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 780px; margin-inline: auto; gap: 1.4rem; }
.sk-how--duo .sk-how__item { padding: 2.4rem 1.7rem 1.7rem; }
.sk-how--duo .sk-how__num { width: 2.6rem; height: 2.6rem; font-size: 1.15rem; top: -1.1rem; }
.sk-how--duo .sk-how__title { font-size: 1.2rem; }
.sk-how--duo .sk-how__item p { font-size: .95rem; }

/* Unterseiten-Heros einheitlich wie der Kontakt-Hero: gleiche Schriftgroesse,
   dadurch auch gleiche Bauhoehe bei gleichem Innenabstand. */
.sk-brand .sk-about-hero h1,
.sk-brand .sk-lp-hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin: .3rem 0 .5rem; line-height: 1.05; }
.sk-brand .sk-about-hero .sk-lead,
.sk-brand .sk-lp-hero .sk-lead { font-size: clamp(1rem, 1.7vw, 1.1rem); }


/* Fussnoten unter der Geschenkwahl */
.sk-gift-fn { max-width: 46rem; margin: 1.4rem auto 0; text-align: left; }
.sk-gift-fn p { margin: .45rem 0; font-size: .78rem; line-height: 1.55; color: var(--sk-text-muted); }
.sk-gift-fn__mark { font-weight: 700; color: var(--sk-ember); margin-right: .25rem; }

/* ---------- Geschenkwahl, Variante 2: Grill-Duell ---------- */
.sk-duel { margin-top: 2.2rem; }
.sk-duel__grid {
	display: grid; gap: 1.2rem; position: relative;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.sk-duel__side {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center;
	min-height: 400px; padding: 2.6rem 1.9rem 2.2rem; gap: .2rem;
	border-radius: var(--sk-radius-lg);
	background-size: cover; background-position: center;
	color: #fff !important; text-decoration: none;
	box-shadow: 0 26px 60px -32px rgba(20, 12, 8, .8);
	transition: transform .25s ease, box-shadow .25s ease;
}
.sk-duel__side::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	/* Deutlich heller als zuvor: das Grillmotiv soll sichtbar bleiben. Die
	   Lesbarkeit uebernehmen der Textschatten und der dunklere Fuss. */
	background:
		radial-gradient(120% 90% at 15% 100%, rgba(232, 93, 4, .42), rgba(0, 0, 0, 0) 62%),
		linear-gradient(180deg, rgba(15, 10, 7, .48) 0%, rgba(15, 10, 7, .38) 45%, rgba(15, 10, 7, .78) 100%);
	transition: opacity .25s ease;
}
.sk-duel__side > * { position: relative; z-index: 1; }
.sk-duel__side:hover { transform: translateY(-4px); box-shadow: 0 34px 70px -30px rgba(157, 2, 8, .75); }
.sk-duel__side:hover::before { opacity: .82; }
.sk-duel__side.is-active { outline: 3px solid var(--sk-honey); outline-offset: -3px; }
.sk-duel__side.is-active::after {
	content: "✓ aktiv"; position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2;
	font-family: var(--sk-font-head); font-size: .72rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	background: var(--sk-honey); color: #17110c; padding: .28rem .7rem; border-radius: 999px;
}

/* Riesiger Buchstabe als Wasserzeichen */
.sk-duel__letter {
	position: absolute; right: -.06em; bottom: -.28em; z-index: 0;
	font-family: var(--sk-font-head); font-weight: 700; font-size: 15rem; line-height: .8;
	color: rgba(255, 255, 255, .07); pointer-events: none; user-select: none;
}
.sk-duel__kicker {
	font-family: var(--sk-font-head); font-size: .82rem; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; color: #fff;
	background: rgba(10, 7, 5, .72); border: 1px solid rgba(255, 255, 255, .28);
	padding: .34rem .95rem; border-radius: 999px;
	margin: 0 0 .9rem;
}
/* Einzeilig: kleinere Groesse, damit "10 % auf alles" auch mobil nebeneinander passt */
.sk-duel__title {
	margin: 0 0 .85rem; color: #fff;
	font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.12; letter-spacing: -.01em;
	display: flex; flex-wrap: wrap; align-items: baseline;
	justify-content: center; gap: .3em;
}
/* Schluesselwort als Feuer-Marker statt Verlaufsschrift: Verlaufstext auf einem
   Flammenfoto hat praktisch keinen Kontrast, ein farbiger Balken immer. */
.sk-duel__title em {
	font-style: normal;
	display: inline-block;
	background: var(--sk-fire);
	color: #fff;
	padding: 0 .22em .06em;
	border-radius: 8px;
	box-shadow: 0 8px 24px -10px rgba(157, 2, 8, .9);
}
.sk-duel__title sup { font-size: .58em; line-height: 1; color: var(--sk-honey); font-weight: 700; align-self: flex-start; margin-left: -.18em; }
.sk-duel__sub { margin: 0 auto 1.3rem; font-size: .95rem; line-height: 1.55; color: rgba(255, 255, 255, .9); max-width: 22rem; }

/* Preisschild */
.sk-duel__tag {
	display: inline-flex; align-items: baseline; gap: .5rem;
	background: #fff; color: var(--sk-red);
	font-family: var(--sk-font-head); font-weight: 700; font-size: 1.25rem;
	padding: .45rem 1rem; border-radius: 6px 999px 999px 6px;
	transform: rotate(-1.4deg); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .7);
	margin: 0 0 1.5rem;
}
.sk-duel__tag s { color: rgba(23, 17, 12, .45); font-weight: 400; font-size: .82em; }
.sk-duel__tag .woocommerce-Price-amount { white-space: nowrap; }

.sk-duel__cta {
	margin-top: .3rem; display: inline-flex; align-items: center; gap: .5em;
	font-family: var(--sk-font-head); font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; font-size: .92rem;
	padding: .9rem 1.7rem; border-radius: 999px;
	background: var(--sk-fire); color: #fff; box-shadow: var(--sk-shadow-red);
	transition: filter .2s ease;
}
.sk-duel__side:hover .sk-duel__cta { filter: brightness(1.08); }

/* "oder"-Siegel zwischen den Panels */
.sk-duel__vs {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
	width: 3.4rem; height: 3.4rem; display: grid; place-items: center;
	border-radius: 50%; background: var(--sk-cream); color: var(--sk-red);
	font-family: var(--sk-font-head); font-weight: 700; font-size: .78rem;
	text-transform: uppercase; letter-spacing: .04em;
	box-shadow: 0 0 0 4px rgba(250, 246, 238, .55), 0 10px 24px -12px rgba(0, 0, 0, .6);
	pointer-events: none;
}
@media (max-width: 640px) {
	.sk-duel__vs { position: static; transform: none; margin: -.2rem auto; }
	.sk-duel__side { min-height: 320px; padding: 1.8rem 1.4rem 1.4rem; }
	.sk-duel__letter { font-size: 11rem; }
}
.sk-duel__hint { text-align: center; margin: 1.5rem 0 0; font-size: .88rem; color: var(--sk-text-muted); }


/* Sanftes Scrollen zum Ankerziel, Sprungziel unter der klebenden Kopfzeile freistellen */
html { scroll-behavior: smooth; }
#geschenk { scroll-margin-top: 96px; }
.sk-lp-hero .wp-block-buttons { margin-top: .9rem; }
.sk-lp-hero .sk-btn-scroll .wp-block-button__link { padding: .85rem 1.6rem; font-size: .98rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Duell-Panels: Textfarben mit ausreichender Spezifitaet, sonst gewinnt die
   allgemeine Ueberschriftenregel und der Titel wird dunkel auf dunkel. */
.sk-brand .sk-duel__side,
.sk-brand .sk-duel__side .sk-duel__title,
.sk-brand .sk-duel__side h3 { color: #fff !important; }
.sk-brand .sk-duel__side .sk-duel__title { text-shadow: 0 2px 16px rgba(0, 0, 0, .6); }
.sk-brand .sk-duel__side .sk-duel__title em { color: #fff !important; text-shadow: none; }
.sk-brand .sk-duel__side .sk-duel__sub { color: rgba(255, 255, 255, .85) !important; }
.sk-brand .sk-duel__side .sk-duel__kicker { color: var(--sk-honey) !important; }
.sk-brand .sk-duel__side .sk-duel__tag { color: var(--sk-red) !important; }
.sk-brand .sk-duel__side .sk-duel__tag s { color: rgba(23, 17, 12, .45) !important; }
.sk-brand .sk-duel__side .sk-duel__cta { color: #fff !important; }
/* etwas mehr Luft, damit Titel und Preisschild nicht gedraengt wirken */
.sk-duel__side { min-height: 420px; }


/* Hellere Panels brauchen kraeftigere Schatten, damit die Schrift sicher steht */
.sk-brand .sk-duel__side .sk-duel__title { text-shadow: 0 2px 4px rgba(0,0,0,.55), 0 6px 26px rgba(0,0,0,.75); }
.sk-brand .sk-duel__side .sk-duel__sub { text-shadow: 0 1px 3px rgba(0,0,0,.7); color: rgba(255,255,255,.94) !important; }
.sk-brand .sk-duel__side .sk-duel__kicker { text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.sk-duel__letter { color: rgba(255, 255, 255, .12); }


/* Optionslabel und Inhalt mittig, Buchstabe dezenter im Hintergrund */
.sk-brand .sk-duel__side .sk-duel__kicker { color: #fff !important; }
.sk-duel__letter { opacity: .55; right: 50%; transform: translateX(50%); bottom: -.22em; }

/* Fussnoten: haengender Einzug, damit Folgezeilen buendig unter dem Text stehen */
.sk-gift-fn p {
	display: grid;
	grid-template-columns: 1.6rem 1fr;
	align-items: start;
	column-gap: .2rem;
}
.sk-gift-fn__mark { margin-right: 0; text-align: left; }

/* Verweise in Hinweisboxen als erkennbare Schaltflaeche statt dunkelrot auf rot */
.woocommerce-error a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-message a:not(.button) {
	display: inline-block;
	margin-left: .5em;
	padding: .18em .8em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-weight: 600;
	font-size: .94em;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s ease;
}
.woocommerce-error a:not(.button) { color: #fff !important; border-color: rgba(255, 255, 255, .75); }
.woocommerce-error a:not(.button):hover { background: rgba(255, 255, 255, .18); }
.woocommerce-info a:not(.button):hover,
.woocommerce-message a:not(.button):hover { background: rgba(0, 0, 0, .06); }
.woocommerce-error a:not(.button)::after { content: " \2192"; }

/* ================= Kasse im Stil moderner Shop-Systeme ================= */

/* Ablenkungsfrei: Hauptnavigation, Aktionsleiste, Sticky-Leiste und Fuss aus */
body.sk-checkout header.ct-header,
body.sk-checkout .sk-promo,
body.sk-checkout .sk-sticky-cta,
body.sk-checkout .sk-footer,
body.sk-checkout .ct-breadcrumbs,
body.sk-checkout .hero-section { display: none !important; }
body.sk-checkout { background: #fff; }

.sk-co-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; padding: 1.1rem clamp(1rem, 4vw, 2.4rem);
	border-bottom: 1px solid rgba(0, 0, 0, .08); background: #fff;
}
.sk-co-head__logo img { display: block; height: 34px; width: auto; }
.sk-co-head__cart {
	display: inline-flex; align-items: center; gap: .45rem;
	font-size: .9rem; font-weight: 600; color: var(--sk-text) !important; text-decoration: none;
}
.sk-co-head__cart:hover { color: var(--sk-red) !important; }
@media (max-width: 600px) { .sk-co-head__cartlabel { display: none; } }

.sk-co-foot {
	display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: center;
	padding: 2rem 1.2rem 2.6rem; border-top: 1px solid rgba(0, 0, 0, .08);
	margin-top: 3rem; font-size: .84rem;
}
.sk-co-foot a { color: var(--sk-text-muted) !important; text-decoration: underline; text-underline-offset: .18em; }
.sk-co-foot a:hover { color: var(--sk-red) !important; }

/* Express-Zahlarten und Trenner */
.sk-co-express { max-width: 560px; margin: 0 auto 1.2rem; text-align: center; }
.sk-co-express__title { margin: 0 0 .6rem; font-size: .82rem; font-weight: 600; color: var(--sk-text-muted); }
.sk-co-express__slot { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sk-co-or {
	max-width: 560px; margin: 0 auto 2rem; display: flex; align-items: center; gap: 1rem;
	color: var(--sk-text-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
}
.sk-co-or::before, .sk-co-or::after { content: ""; flex: 1; height: 1px; background: rgba(0, 0, 0, .12); }

/* Zwei Spalten: Formular links, Uebersicht rechts und mitlaufend */
@media (min-width: 981px) {
	body.sk-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
		column-gap: clamp(2rem, 5vw, 4rem);
		align-items: start;
	}
	body.sk-checkout #customer_details { grid-column: 1; grid-row: 1 / span 3; }
	body.sk-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
	body.sk-checkout .sk-co-coupon { grid-column: 2; grid-row: 2; }
	body.sk-checkout #order_review { grid-column: 2; grid-row: 3; position: sticky; top: 1.5rem; }
	body.sk-checkout #customer_details .col2-set { display: block; }
	body.sk-checkout #customer_details .col-1,
	body.sk-checkout #customer_details .col-2 { width: 100%; float: none; }
}
body.sk-checkout .woocommerce { max-width: 1120px; margin-inline: auto; }

/* Abschnittsueberschriften */
.sk-co-section {
	margin: 1.8rem 0 .9rem; font-size: 1.15rem; line-height: 1.2;
	font-family: var(--sk-font-head); text-transform: none; letter-spacing: 0;
}
.sk-co-section:first-child { margin-top: 0; }
body.sk-checkout #customer_details h3,
body.sk-checkout #order_review_heading {
	font-size: 1.15rem; font-family: var(--sk-font-head); margin: 1.6rem 0 .9rem;
}

/* Eingabefelder mit mitlaufender Beschriftung */
body.sk-checkout .form-row { position: relative; margin: 0 0 .85rem; padding: 0; }
body.sk-checkout .form-row label:not(.checkbox):not(.screen-reader-text) {
	position: absolute; left: .95rem; top: .95rem; z-index: 1;
	font-size: .95rem; color: var(--sk-text-muted); pointer-events: none;
	transition: transform .14s ease, font-size .14s ease, color .14s ease;
	background: transparent; padding: 0; margin: 0; max-width: calc(100% - 2rem);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.sk-checkout .form-row input[type="text"],
body.sk-checkout .form-row input[type="email"],
body.sk-checkout .form-row input[type="tel"],
body.sk-checkout .form-row input[type="password"],
body.sk-checkout .form-row textarea,
body.sk-checkout .form-row select {
	width: 100%; border: 1px solid rgba(0, 0, 0, .22); border-radius: 10px;
	padding: 1.35rem .95rem .5rem; font-size: 1rem; background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.sk-checkout .form-row textarea { padding-top: 1.6rem; min-height: 6rem; }
body.sk-checkout .form-row input:focus,
body.sk-checkout .form-row textarea:focus,
body.sk-checkout .form-row select:focus {
	outline: none; border-color: var(--sk-ember); box-shadow: 0 0 0 3px rgba(232, 93, 4, .18);
}
body.sk-checkout .form-row:has(input:focus) label:not(.checkbox),
body.sk-checkout .form-row:has(textarea:focus) label:not(.checkbox),
body.sk-checkout .form-row:has(input:not(:placeholder-shown)) label:not(.checkbox),
body.sk-checkout .form-row:has(textarea:not(:placeholder-shown)) label:not(.checkbox),
body.sk-checkout .form-row:has(select) label:not(.checkbox) {
	transform: translateY(-.62rem); font-size: .74rem;
}
body.sk-checkout .form-row:has(input:focus) label:not(.checkbox) { color: var(--sk-ember); }
body.sk-checkout .form-row select { padding-top: 1.35rem; }
body.sk-checkout .form-row .select2-container .select2-selection--single {
	height: auto; min-height: 3.4rem; border: 1px solid rgba(0, 0, 0, .22); border-radius: 10px;
	display: flex; align-items: flex-end; padding: 0 .95rem .5rem;
}
body.sk-checkout .form-row .select2-container .select2-selection__rendered { padding: 0; line-height: 1.4; }
body.sk-checkout .form-row .select2-selection__arrow { top: 50%; transform: translateY(-50%); }

@media (min-width: 560px) {
	body.sk-checkout .form-row-first,
	body.sk-checkout .form-row-last { width: calc(50% - .42rem); float: none; display: inline-block; vertical-align: top; }
	body.sk-checkout .form-row-first { margin-right: .78rem; }
}

/* Bestelluebersicht */
body.sk-checkout #order_review {
	background: #f7f6f4; border: 1px solid rgba(0, 0, 0, .07);
	border-radius: 14px; padding: 1.4rem;
}
body.sk-checkout #order_review table.shop_table { border: 0; margin: 0; background: transparent; }
body.sk-checkout #order_review table.shop_table th,
body.sk-checkout #order_review table.shop_table td { border: 0; padding: .45rem 0; }
body.sk-checkout #order_review .order-total th,
body.sk-checkout #order_review .order-total td { border-top: 1px solid rgba(0, 0, 0, .12); padding-top: .9rem; font-size: 1.12rem; }

/* Gutscheinfeld ueber der Uebersicht */
.sk-co-coupon { display: flex; gap: .5rem; margin: 0 0 1rem; }
.sk-co-coupon input {
	flex: 1 1 auto; min-width: 0; border: 1px solid rgba(0, 0, 0, .22);
	border-radius: 10px; padding: .85rem .9rem; font-size: .95rem;
}
.sk-co-coupon input:focus { outline: none; border-color: var(--sk-ember); box-shadow: 0 0 0 3px rgba(232, 93, 4, .18); }
.sk-co-coupon__btn {
	flex: 0 0 auto; border: 0; border-radius: 10px; padding: .85rem 1.3rem;
	background: rgba(0, 0, 0, .07); color: var(--sk-text); font-weight: 600; cursor: pointer;
}
.sk-co-coupon__btn:hover { background: rgba(0, 0, 0, .12); }

/* Bestellbutton gross und ruhig */
body.sk-checkout #place_order {
	width: 100%; margin-top: 1rem; padding: 1.1rem 1.5rem; font-size: 1.05rem;
	border-radius: 999px; background: var(--sk-fire); color: #fff; border: 0;
	font-family: var(--sk-font-head); text-transform: uppercase; letter-spacing: .05em;
	box-shadow: var(--sk-shadow-red); cursor: pointer;
}
body.sk-checkout #place_order:hover { filter: brightness(1.06); }

/* Zahlarten als Liste mit Rahmen */
body.sk-checkout .woocommerce-checkout-payment { background: transparent !important; }
body.sk-checkout ul.wc_payment_methods {
	border: 1px solid rgba(0, 0, 0, .16) !important; border-radius: 12px; overflow: hidden;
	padding: 0 !important; margin: 0 0 1rem;
}
body.sk-checkout ul.wc_payment_methods li.wc_payment_method { border-bottom: 1px solid rgba(0, 0, 0, .1); margin: 0; padding: 0; list-style: none; }
body.sk-checkout ul.wc_payment_methods li.wc_payment_method:last-child { border-bottom: 0; }
body.sk-checkout ul.wc_payment_methods li.wc_payment_method > label { display: flex; align-items: center; gap: .6rem; padding: 1rem; margin: 0; font-weight: 600; cursor: pointer; }
body.sk-checkout ul.wc_payment_methods li.wc_payment_method .payment_box { margin: 0; padding: 0 1rem 1rem; background: transparent; font-size: .9rem; }
body.sk-checkout ul.wc_payment_methods li.wc_payment_method .payment_box::before { display: none; }

/* ---------- Konto- und Warenkorb-Symbol in der Kopfzeile ---------- */
.sk-brand header.ct-header .sk-navitem { display: flex; align-items: center; }
.sk-brand header.ct-header .sk-navitem > a,
.sk-brand header.ct-header .sk-navicon-wrap { display: flex; align-items: center; }

.sk-brand header.ct-header .sk-navicon,
.sk-brand header.ct-header .sk-navicon:link,
.sk-brand header.ct-header .sk-navicon:visited {
	position: relative;
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .45rem .55rem;
	color: #fff !important;
	text-decoration: none;
	border-radius: 999px;
	transition: color .16s ease, background-color .16s ease;
}
.sk-brand header.ct-header .sk-navicon:hover { color: var(--sk-honey) !important; background: rgba(255, 255, 255, .09); }
.sk-navicon__svg { display: block; flex: 0 0 auto; }

/* Beschriftung nur ab mittleren Bildschirmen, sonst wird die Zeile zu voll */
.sk-navicon__label {
	font-family: var(--sk-font-head); font-size: .78rem; font-weight: 600;
	letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 1200px) { .sk-navicon__label { display: none; } }

/* Zaehler am Warenkorb */
.sk-navicon__count {
	position: absolute; top: .1rem; right: .05rem;
	min-width: 1.05rem; height: 1.05rem; padding: 0 .22rem;
	display: grid; place-items: center;
	border-radius: 999px; background: rgba(255, 255, 255, .28); color: #fff;
	font-family: var(--sk-font-head); font-size: .66rem; font-weight: 700; line-height: 1;
	transition: background-color .16s ease, transform .16s ease;
}
.sk-navicon__count.is-filled { background: var(--sk-ember); box-shadow: 0 0 0 2px rgba(23, 17, 12, .9); }
.sk-navicon--cart:hover .sk-navicon__count.is-filled { transform: scale(1.08); }

/* Im mobilen Ausklappmenue als normale Zeilen mit Text */
.sk-brand .ct-panel .sk-navitem,
.sk-brand #offcanvas .sk-navitem { display: block; }
.sk-brand .ct-panel .sk-navicon,
.sk-brand #offcanvas .sk-navicon { padding: .6rem 0; gap: .6rem; }
.sk-brand .ct-panel .sk-navicon__label,
.sk-brand #offcanvas .sk-navicon__label { display: inline; font-size: .95rem; }
.sk-brand .ct-panel .sk-navicon__count,
.sk-brand #offcanvas .sk-navicon__count { position: static; margin-left: .3rem; }
/* Hier stand ein ::after mit content:"Warenkorb". Es stammt aus der Zeit, als
   der Link im Ausklappmenue kein sichtbares Label hatte. Seit .sk-navicon__label
   dort erscheint (Regel darueber), stand der Text zweimal nebeneinander.
   Per CSS eingefuegter Text ist ausserdem nicht markierbar und fuer
   Vorlesefunktionen unzuverlaessig - deshalb ersatzlos entfernt. */

/* Auf der Kasse bleibt die Kopfzeile ausgeblendet, dort gibt es den eigenen Kopf */
body.sk-checkout .sk-navitem { display: none !important; }

/* ---------- Kasse: Feinschliff ---------- */

/* Abschnittsueberschriften ruhig statt Versalien-Display */
body.sk-checkout .sk-co-section,
body.sk-checkout #order_review_heading,
body.sk-checkout #order_review h3,
body.sk-checkout #customer_details h3 {
	font-family: var(--sk-font-body) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 700 !important;
	font-size: 1.08rem !important;
	line-height: 1.3 !important;
	color: var(--sk-text) !important;
	margin: 1.6rem 0 .8rem !important;
}
body.sk-checkout .sk-co-section:first-child { margin-top: 0 !important; }
/* WooCommerce-Ueberschrift "Rechnungsdaten" faellt weg, unsere steht direkt darueber */
body.sk-checkout .woocommerce-billing-fields > h3 { display: none !important; }
/* "Lieferung an eine andere Adresse" ist eine Auswahl, keine Ueberschrift */
body.sk-checkout #ship-to-different-address {
	font-size: .95rem !important; font-weight: 600 !important; margin: .4rem 0 .8rem !important;
}
body.sk-checkout #ship-to-different-address label { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }

/* Reihenfolge rechts: Zahlung, Uebersicht, dann Pflicht-Checkboxen direkt ueber dem Button */
@media (min-width: 981px) {
	body.sk-checkout #order_review { display: flex; flex-direction: column; }
}
body.sk-checkout #order_review { display: flex; flex-direction: column; }
body.sk-checkout #order_review > h3:first-of-type { order: 1; }
body.sk-checkout #order_review > .woocommerce-checkout-payment { order: 2; }
body.sk-checkout #order_review > .wc-gzd-heading-moved { order: 3; }
body.sk-checkout #order_review > table.shop_table { order: 4; }
body.sk-checkout #order_review > .wc-gzd-checkbox-placeholder { order: 5; }
body.sk-checkout #order_review > .wc-gzd-order-submit { order: 6; }
body.sk-checkout #order_review > input { order: 0; }

/* Pflicht-Checkboxen einheitlich, AGB zuerst */
body.sk-checkout .wc-gzd-checkbox-placeholder,
body.sk-checkout .sk-checkout-legal {
	background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px;
	padding: .9rem 1rem; margin: .6rem 0 0;
}
body.sk-checkout .wc-gzd-checkbox-placeholder:empty { display: none; padding: 0; border: 0; margin: 0; }
body.sk-checkout .wc-gzd-checkbox-placeholder .form-row,
body.sk-checkout .sk-checkout-legal .form-row { margin: 0; }
body.sk-checkout .wc-gzd-checkbox-placeholder label,
body.sk-checkout .sk-checkout-legal label {
	position: static !important; display: flex; gap: .6rem; align-items: flex-start;
	font-size: .88rem; line-height: 1.45; color: var(--sk-text); pointer-events: auto;
	transform: none !important; max-width: none; white-space: normal; overflow: visible;
}
body.sk-checkout .wc-gzd-checkbox-placeholder input[type="checkbox"],
body.sk-checkout .sk-checkout-legal input[type="checkbox"] { margin-top: .18rem; flex: 0 0 auto; }

/* Geschenkzeile in der Bestelluebersicht kompakt halten */
body.sk-checkout #order_review .sk-gift-tag,
.woocommerce-checkout-review-order-table .sk-gift-tag {
	display: block; margin-top: .25rem; font-size: .74rem; font-weight: 600;
	line-height: 1.35; color: var(--sk-red); white-space: normal;
}
body.sk-checkout #order_review table.shop_table td.product-name { line-height: 1.4; }
body.sk-checkout #order_review table.shop_table .product-quantity { white-space: nowrap; font-weight: 600; }

/* Auswahlfeld Land: Wert nicht unter der Beschriftung verstecken */
body.sk-checkout .form-row select { padding-top: 1.5rem; padding-bottom: .45rem; height: auto; }
body.sk-checkout .form-row .select2-container--default .select2-selection--single { min-height: 3.5rem; padding-top: 1.4rem; align-items: center; }
body.sk-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.2; padding-left: 0; }

/* ---------- Optische Trennung vor den Symbolen ---------- */
.sk-brand header.ct-header .menu .sk-navitem--account { position: relative; margin-left: .7rem; padding-left: .9rem; }
.sk-brand header.ct-header .menu .sk-navitem--account::before {
	content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 1px; height: 1.35rem; background: rgba(255, 255, 255, .28);
}
/* Im Ausklappmenue eine waagerechte Linie ueber der Kontogruppe */
.sk-brand .ct-panel .menu .sk-navitem--account,
.sk-brand #offcanvas .menu .sk-navitem--account {
	margin-left: 0; padding-left: 0; margin-top: .9rem; padding-top: .9rem;
	border-top: 1px solid rgba(255, 255, 255, .18);
}
.sk-brand .ct-panel .menu .sk-navitem--account::before,
.sk-brand #offcanvas .menu .sk-navitem--account::before { display: none; }
/* Auf schmalen Bildschirmen die Symbole eng zusammen halten */
@media (max-width: 782px) {
	.sk-brand header.ct-header .sk-navicon { padding: .4rem .35rem; }
	.sk-brand header.ct-header .menu .sk-navitem--account { margin-left: .4rem; padding-left: .6rem; }
}

/* ================= Kundenbereich "Mein Konto" ================= */

/* Seitentitel ruhiger, Inhalt bekommt Luft */
.woocommerce-account .woocommerce { max-width: 1120px; margin-inline: auto; }
.woocommerce-account .woocommerce-MyAccount-content > h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content > h3:first-child { margin-top: 0; }

/* Navigation links als Karte */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none; margin: 0; padding: 0;
	border: 1px solid rgba(0, 0, 0, .09); border-radius: 14px; overflow: hidden; background: #fff;
}
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem;
	color: var(--sk-text) !important; text-decoration: none; font-weight: 600; font-size: .95rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: rgba(0, 0, 0, .04); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a {
	background: var(--sk-fire); color: #fff !important;
}

/* Adresskarten: Titel und Bearbeiten-Link sauber getrennt */
.woocommerce-account .woocommerce-Addresses { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.woocommerce-account .woocommerce-Address {
	width: auto !important; float: none !important; margin: 0 !important;
	background: #fff; border: 1px solid rgba(0, 0, 0, .09); border-radius: 14px;
	padding: 1.3rem 1.4rem;
	display: flex; flex-direction: column; gap: .6rem;
}
.woocommerce-account .woocommerce-Address-title {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 1rem; flex-wrap: wrap; margin: 0 0 .2rem;
	border-bottom: 1px solid rgba(0, 0, 0, .08); padding-bottom: .7rem;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0 !important;
	font-family: var(--sk-font-body) !important;
	font-size: 1.05rem !important; font-weight: 700 !important;
	text-transform: none !important; letter-spacing: 0 !important;
	color: var(--sk-text) !important;
}
.woocommerce-account .woocommerce-Address-title .edit {
	flex: 0 0 auto;
	font-size: .84rem; font-weight: 600; text-decoration: none;
	color: var(--sk-red) !important;
	border: 1px solid rgba(157, 2, 8, .35); border-radius: 999px;
	padding: .28rem .8rem; white-space: nowrap;
	transition: background-color .16s ease, border-color .16s ease;
}
.woocommerce-account .woocommerce-Address-title .edit:hover { background: rgba(157, 2, 8, .07); border-color: var(--sk-red); }
.woocommerce-account .woocommerce-Address address {
	margin: 0; font-style: normal; line-height: 1.6; color: var(--sk-text-muted); font-size: .95rem;
}

/* Formulare im Konto */
.woocommerce-account .woocommerce-MyAccount-content form .form-row { margin: 0 0 .9rem; }
.woocommerce-account .woocommerce-MyAccount-content label { font-size: .88rem; font-weight: 600; margin-bottom: .3rem; display: block; }
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content select {
	width: 100%; border: 1px solid rgba(0, 0, 0, .22); border-radius: 10px;
	padding: .8rem .9rem; font-size: .98rem; background: #fff;
}
.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus {
	outline: none; border-color: var(--sk-ember); box-shadow: 0 0 0 3px rgba(232, 93, 4, .18);
}

/* Einzelne Formulare (Passwort vergessen usw.) mittig und aufgeraeumt.
   Der Spaltencontainer der Anmeldeseite darf hier NICHT begrenzt werden,
   sonst stapeln Anmelden und Registrieren statt nebeneinander zu stehen. */
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account .woocommerce-form-login:not(.u-columns .woocommerce-form-login) {
	max-width: 460px; margin-inline: auto;
}
.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-MyAccount-content .button {
	background: var(--sk-fire); color: #fff !important; border: 0; border-radius: 999px;
	padding: .85rem 1.6rem; font-family: var(--sk-font-head); text-transform: uppercase;
	letter-spacing: .05em; font-size: .92rem; box-shadow: var(--sk-shadow-red); cursor: pointer;
}

/* Mobil: Navigation ueber den Inhalt, volle Breite */
@media (max-width: 782px) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; float: none !important; }
	.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 1.4rem; }
	.woocommerce-account .woocommerce-Address-title { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* ---------- Kasse: Felder und Bestelltabelle sauber setzen ---------- */

/* Felder etwas hoeher, damit Beschriftung und Wert nicht aneinander kleben */
body.sk-checkout .form-row input[type="text"],
body.sk-checkout .form-row input[type="email"],
body.sk-checkout .form-row input[type="tel"],
body.sk-checkout .form-row input[type="password"],
body.sk-checkout .form-row select {
	min-height: 3.7rem;
	padding: 1.6rem .95rem .55rem;
	line-height: 1.25;
}
body.sk-checkout .form-row textarea { padding: 1.7rem .95rem .8rem; }

/* Ruhende Beschriftung mittig im Feld */
body.sk-checkout .form-row label:not(.checkbox):not(.screen-reader-text) {
	top: 50%;
	transform: translateY(-50%);
	font-size: .95rem;
	line-height: 1.2;
	transform-origin: left center;
}
/* Aktive Beschriftung klein nach oben, mit sicherem Abstand zum Wert.
   Das zweite :not() ist noetig: ohne es hat die Ruhe-Regel darueber eine
   hoehere Spezifitaet und die Beschriftung bliebe mittig auf dem Wert liegen. */
body.sk-checkout .form-row:has(input:focus) label:not(.checkbox):not(.screen-reader-text),
body.sk-checkout .form-row:has(textarea:focus) label:not(.checkbox):not(.screen-reader-text),
body.sk-checkout .form-row:has(input:not(:placeholder-shown)) label:not(.checkbox):not(.screen-reader-text),
body.sk-checkout .form-row:has(textarea:not(:placeholder-shown)) label:not(.checkbox):not(.screen-reader-text),
body.sk-checkout .form-row:has(select) label:not(.checkbox):not(.screen-reader-text) {
	top: .62rem;
	transform: translateY(0);
	font-size: .72rem;
	letter-spacing: .01em;
	font-weight: 600;
	color: var(--sk-text-muted);
}
body.sk-checkout .form-row:has(input:focus) label:not(.checkbox):not(.screen-reader-text) { color: var(--sk-ember); }
/* Textbereich: Beschriftung immer oben, nicht mittig */
body.sk-checkout .form-row:has(textarea) label:not(.checkbox):not(.screen-reader-text) { top: 1rem; transform: none; }
body.sk-checkout .form-row:has(textarea:not(:placeholder-shown)) label:not(.checkbox):not(.screen-reader-text),
body.sk-checkout .form-row:has(textarea:focus) label:not(.checkbox):not(.screen-reader-text) { top: .62rem; transform: none; }
/* Pflichtsternchen dezent */
body.sk-checkout .form-row .required { color: var(--sk-red); text-decoration: none; margin-left: .15em; }
body.sk-checkout .form-row .optional { display: none; }

/* Auswahlfelder: Wert nicht unter die Beschriftung schieben */
body.sk-checkout .form-row select { padding-top: 1.6rem; }
body.sk-checkout .form-row .select2-container--default .select2-selection--single {
	min-height: 3.7rem; padding: 1.6rem .95rem .55rem; align-items: flex-start;
}

/* ---------- Bestelltabelle: Produktzeile ---------- */

/* Die Zelle darf kein Flex-Container sein, sonst wird jeder Hinweis zur Spalte */
body.sk-checkout .woocommerce-checkout-review-order-table td.product-name,
body.sk-checkout .woocommerce-checkout-review-order-table th.product-name {
	display: table-cell !important;
	width: 62%;
	vertical-align: top;
	line-height: 1.45;
}
body.sk-checkout .woocommerce-checkout-review-order-table td.product-total,
body.sk-checkout .woocommerce-checkout-review-order-table th.product-total {
	text-align: right; white-space: nowrap; vertical-align: top;
}
/* Produktbild klein und links, Text daneben */
body.sk-checkout .woocommerce-checkout-review-order-table td.product-name img {
	width: 44px; height: 44px; object-fit: cover; border-radius: 8px;
	float: left; margin: .1rem .7rem .3rem 0;
}
/* Menge als ruhiges Zeichen hinter dem Namen */
body.sk-checkout .woocommerce-checkout-review-order-table .product-quantity {
	display: inline; font-weight: 700; color: var(--sk-text-muted); white-space: nowrap;
}
/* Geschenk-Kennzeichnung als eigene Zeile ueber die volle Breite */
body.sk-checkout .woocommerce-checkout-review-order-table .sk-gift-tag {
	display: block; clear: none; width: auto; margin: .3rem 0 0;
	font-size: .78rem; font-weight: 600; line-height: 1.4; color: var(--sk-red);
	white-space: normal;
}
/* Grundpreis und Mengenangabe von Germanized dezent */
body.sk-checkout .woocommerce-checkout-review-order-table .wc-gzd-additional-info {
	display: block; margin: .15rem 0 0; font-size: .78rem; color: var(--sk-text-muted); font-weight: 400;
}
body.sk-checkout .woocommerce-checkout-review-order-table tr.cart_item td { padding: .8rem 0 !important; border-bottom: 1px solid rgba(0, 0, 0, .07) !important; }
body.sk-checkout .woocommerce-checkout-review-order-table tr.cart_item td::after { content: ""; display: block; clear: both; }

/* ---------- Kasse: normale Kopfzeile behalten, nur Ablenkendes ausblenden ---------- */
body.sk-checkout header.ct-header { display: block !important; }
body.sk-checkout .sk-promo,
body.sk-checkout .sk-sticky-cta { display: none !important; }
body.sk-checkout .sk-navitem { display: flex !important; }
body.sk-checkout .ct-panel .sk-navitem { display: block !important; }
/* Der eigene schmale Kassenkopf entfaellt */
.sk-co-head { display: none !important; }
/* Abstand nach der Kopfzeile, damit der Express-Bereich nicht klebt */
body.sk-checkout .woocommerce { padding-top: clamp(1.4rem, 3vw, 2.4rem); }

/* ---------- Geschenkzeile in der Bestelluebersicht ----------
   Germanized legt den Produktnamen in einen Flex-Container. Ohne Umbruch wird
   jede Zusatzangabe zur schmalen Spalte neben dem Namen. */
body.sk-checkout .wc-gzd-cart-item-name-wrapper,
.woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline;
	gap: .35rem;
}
body.sk-checkout .wc-gzd-cart-item-name-wrapper > .sk-gift-tag,
.woocommerce-checkout-review-order-table .sk-gift-tag {
	flex: 1 0 100% !important;
	width: 100%;
	margin: .35rem 0 0;
	padding: .3rem .55rem;
	border-radius: 8px;
	background: rgba(232, 93, 4, .1);
	color: var(--sk-red);
	font-size: .76rem; font-weight: 600; line-height: 1.35;
	white-space: normal;
}
/* Menge direkt hinter dem Namen, nicht in eigener Spalte */
body.sk-checkout .wc-gzd-cart-item-name-wrapper .product-quantity {
	flex: 0 0 auto; order: 2; font-weight: 700; color: var(--sk-text-muted);
}
body.sk-checkout .wc-gzd-cart-item-name-wrapper > a,
body.sk-checkout .wc-gzd-cart-item-name-wrapper > .product-name-text { flex: 1 1 auto; min-width: 0; }

/* ================= Herkunfts-Siegel "Powered by Grillborzer" ================= */

.sk-sealband { background: var(--sk-cream); }
.sk-seal-wrap { display: flex; justify-content: center; }

.sk-seal {
	position: relative;
	display: inline-block;
	padding: 1.5rem 2.2rem 1.3rem;
	border-radius: 18px;
	background: linear-gradient(158deg, #221812 0%, #17110c 55%, #2b1a12 100%);
	color: #fff !important;
	text-decoration: none;
	transform: rotate(-1.6deg);
	box-shadow: 0 22px 48px -26px rgba(20, 12, 8, .85), inset 0 1px 0 rgba(255, 255, 255, .07);
	transition: transform .22s ease, box-shadow .22s ease;
	max-width: 100%;
}
/* Warme Glut im Hintergrund, wie beim Rest der Seite */
.sk-seal::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: radial-gradient(70% 120% at 15% 110%, rgba(232, 93, 4, .38), rgba(0, 0, 0, 0) 62%);
}
.sk-seal:hover { transform: rotate(-1.6deg) translateY(-4px); box-shadow: 0 30px 60px -26px rgba(157, 2, 8, .7), inset 0 1px 0 rgba(255, 255, 255, .1); }

/* Prägerand wie bei einem Stempel */
.sk-seal__ring {
	position: absolute; inset: .45rem; border-radius: 13px;
	border: 1.5px dashed rgba(252, 191, 73, .45);
	pointer-events: none;
}
.sk-seal__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem; }

.sk-seal__kicker {
	font-family: var(--sk-font-head); font-size: .68rem; font-weight: 700;
	letter-spacing: .28em; text-transform: uppercase; color: var(--sk-honey);
	padding-left: .28em; /* gleicht die Sperrung optisch aus */
}
.sk-seal__mark {
	display: block; width: auto; height: auto;
	max-width: min(280px, 62vw); max-height: 52px;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5));
}
.sk-seal__sub {
	font-size: .82rem; line-height: 1.4; color: rgba(255, 255, 255, .82);
	max-width: 22rem;
}
.sk-seal__cta {
	display: inline-flex; align-items: center; gap: .4em;
	margin-top: .2rem;
	font-family: var(--sk-font-head); font-size: .72rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: #fff;
	border-bottom: 1.5px solid rgba(252, 191, 73, .6); padding-bottom: .12rem;
	transition: color .18s ease, border-color .18s ease;
}
.sk-seal__cta::after { content: "\2192"; }
.sk-seal:hover .sk-seal__cta { color: var(--sk-honey); border-color: var(--sk-honey); }

/* Helle Variante fuer dunkle Abschnitte */
.sk-seal--hell { background: #fff; color: var(--sk-text) !important; box-shadow: 0 20px 44px -26px rgba(60, 30, 10, .5); }
.sk-seal--hell::after { background: radial-gradient(70% 120% at 15% 110%, rgba(232, 93, 4, .16), rgba(0, 0, 0, 0) 62%); }
.sk-seal--hell .sk-seal__ring { border-color: rgba(157, 2, 8, .3); }
.sk-seal--hell .sk-seal__kicker { color: var(--sk-red); }
.sk-seal--hell .sk-seal__sub { color: var(--sk-text-muted); }
.sk-seal--hell .sk-seal__cta { color: var(--sk-red); border-color: rgba(157, 2, 8, .45); }
.sk-seal--hell .sk-seal__mark { filter: invert(1) brightness(.15); }

/* Mobil: kleiner, weniger gekippt, damit nichts aus dem Raster faellt */
@media (max-width: 600px) {
	.sk-seal { padding: 1.2rem 1.3rem 1.1rem; transform: rotate(-1deg); border-radius: 15px; }
	.sk-seal:hover { transform: rotate(-1deg) translateY(-3px); }
	.sk-seal__ring { inset: .38rem; border-radius: 11px; }
	.sk-seal__mark { max-width: 74vw; max-height: 42px; }
	.sk-seal__kicker { font-size: .62rem; letter-spacing: .22em; }
	.sk-seal__sub { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
	.sk-seal, .sk-seal:hover { transform: none; transition: none; }
}

/* ---------- Suche in der Kopfzeile entfernen ---------- */
/* Bei einem einzigen Produkt hat eine Suche keinen Nutzen. display:none nimmt sie
   auch aus der Tastatur-Reihenfolge, anders als visibility oder opacity. */
.sk-brand header.ct-header .ct-header-search,
.sk-brand .ct-panel .ct-header-search,
.sk-brand #search-modal { display: none !important; }

/* ================= Bestelluebersicht: Produktzeilen ==================
 * Aufbau je Zeile:
 *   [Bild 56px + Mengen-Abzeichen]  Produktname            Preis
 *                                   Nebenangaben           Grundpreis
 *                                   Geschenk-Abzeichen
 * Feste Bildspalte gibt allen Zeilen dieselbe Fluchtlinie; die Menge sitzt als
 * Abzeichen am Bild statt mitten im Namen; Nebenangaben sind gedaempft.
 */

body.sk-checkout .woocommerce-checkout-review-order-table { border-collapse: collapse; width: 100%; }

body.sk-checkout .woocommerce-checkout-review-order-table thead th {
	font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
	color: var(--sk-text-muted); padding: 0 0 .6rem !important; border-bottom: 1px solid rgba(0, 0, 0, .1) !important;
}
body.sk-checkout .woocommerce-checkout-review-order-table thead th.product-total { text-align: right; }

body.sk-checkout .woocommerce-checkout-review-order-table tr.cart_item > td {
	padding: .95rem 0 !important;
	border-bottom: 1px solid rgba(0, 0, 0, .07) !important;
	vertical-align: top;
	background: transparent;
}

/* Linke Spalte: Bild als fester Anker, Text daneben */
body.sk-checkout .woocommerce-checkout-review-order-table td.product-name {
	width: 64%; line-height: 1.45; font-size: .95rem; color: var(--sk-text);
}
body.sk-checkout .wc-gzd-cart-item-name-wrapper {
	display: block !important;
	position: relative;
	padding-left: 4.4rem;
	min-height: 3.5rem;
	font-weight: 600;
}
body.sk-checkout .wc-gzd-cart-item-thumbnail {
	position: absolute; left: 0; top: 0; width: 3.5rem; height: 3.5rem;
}
body.sk-checkout .wc-gzd-cart-item-thumbnail img {
	width: 3.5rem; height: 3.5rem; object-fit: cover; display: block;
	border-radius: 10px; border: 1px solid rgba(0, 0, 0, .08);
}

/* Menge als Abzeichen oben rechts am Bild */
body.sk-checkout .wc-gzd-cart-item-name-wrapper .product-quantity {
	position: absolute; left: 2.9rem; top: -.35rem;
	min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px; background: var(--sk-text); color: #fff;
	font-family: var(--sk-font-head); font-size: .7rem; font-weight: 700; line-height: 1;
	box-shadow: 0 0 0 2px #f7f6f4;
	white-space: nowrap;
}

/* Nebenangaben auf derselben Fluchtlinie wie der Name */
body.sk-checkout .woocommerce-checkout-review-order-table td.product-name .units-info {
	margin: .15rem 0 0; padding-left: 4.4rem;
	font-size: .8rem; font-weight: 400; color: var(--sk-text-muted);
}

/* Geschenk-Abzeichen unter dem Namen, volle Textbreite */
body.sk-checkout .woocommerce-checkout-review-order-table .sk-gift-tag {
	display: block; width: auto; margin: .4rem 0 0;
	padding: .3rem .6rem; border-radius: 8px;
	background: rgba(232, 93, 4, .1); color: var(--sk-red);
	font-size: .76rem; font-weight: 600; line-height: 1.35; white-space: normal;
}

/* Rechte Spalte: Preis oben, Grundpreis darunter, beides rechtsbuendig */
body.sk-checkout .woocommerce-checkout-review-order-table td.product-total {
	width: 36%; text-align: right; white-space: nowrap;
	display: table-cell;
}
body.sk-checkout .woocommerce-checkout-review-order-table td.product-total > .amount {
	display: block; font-weight: 700; font-size: 1rem; color: var(--sk-text);
}
body.sk-checkout .woocommerce-checkout-review-order-table td.product-total .unit-price {
	display: block; margin-top: .12rem; font-size: .78rem; font-weight: 400; color: var(--sk-text-muted);
}

/* Summenblock: klare Hierarchie, Beträge rechts */
body.sk-checkout #order_review table.shop_table tfoot th,
body.sk-checkout #order_review table.shop_table tr.cart-subtotal th,
body.sk-checkout #order_review table.shop_table tr.order-total th,
body.sk-checkout #order_review table.shop_table tr.woocommerce-shipping-totals th {
	font-weight: 600; text-align: left; padding: .5rem 0 !important; border: 0 !important;
}
body.sk-checkout #order_review table.shop_table tfoot td { text-align: right; padding: .5rem 0 !important; border: 0 !important; }
body.sk-checkout #order_review table.shop_table tr.order-total th,
body.sk-checkout #order_review table.shop_table tr.order-total td {
	border-top: 1px solid rgba(0, 0, 0, .14) !important; padding-top: .9rem !important;
	font-size: 1.15rem; font-weight: 700;
}
body.sk-checkout #order_review .includes_tax,
body.sk-checkout #order_review small { font-size: .8rem; font-weight: 400; color: var(--sk-text-muted); }
body.sk-checkout #order_review .woocommerce-shipping-totals td { font-weight: 400; }

@media (max-width: 600px) {
	body.sk-checkout .wc-gzd-cart-item-name-wrapper { padding-left: 3.8rem; min-height: 3rem; }
	body.sk-checkout .wc-gzd-cart-item-thumbnail,
	body.sk-checkout .wc-gzd-cart-item-thumbnail img { width: 3rem; height: 3rem; }
	body.sk-checkout .wc-gzd-cart-item-name-wrapper .product-quantity { left: 2.4rem; }
	body.sk-checkout .woocommerce-checkout-review-order-table td.product-name .units-info { padding-left: 3.8rem; }
	body.sk-checkout .woocommerce-checkout-review-order-table td.product-name { font-size: .9rem; }
}

/* ================= Siegel im Hero ================= */

/* Desktop: frei im rechten Bildbereich, ohne den Text zu bedraengen */
@media (min-width: 1100px) {
	/* Bezugspunkt muss der ganze Hero sein, nicht die Textspalte.
	   Sonst landet das Siegel mitten auf der Ueberschrift. */
	.sk-brand .sk-hero.sk-photo { position: relative; }
	.sk-brand .sk-hero__inner,
	.sk-brand .sk-hero__col { position: static; }
	.sk-brand .sk-hero .sk-seal-wrap {
		position: absolute;
		right: clamp(2rem, 5vw, 5.5rem);
		top: 46%;
		transform: translateY(-50%);
		bottom: auto;
		z-index: 3;
		width: auto;
		margin: 0;
	}
	.sk-brand .sk-hero .sk-seal { padding: 1.3rem 1.9rem 1.1rem; }
	.sk-brand .sk-hero .sk-seal__mark { max-width: 230px; max-height: 44px; }
}

/* Mobil und Tablet: kompakt und einzeilig unter der Vertrauenszeile,
   damit der Kaufbutton oben nicht verdraengt wird */
@media (max-width: 1099px) {
	.sk-brand .sk-hero .sk-seal-wrap { justify-content: flex-start; margin-top: 1.1rem; }
	.sk-brand .sk-hero .sk-seal {
		display: flex; align-items: center; gap: .85rem;
		padding: .7rem 1rem; border-radius: 14px; transform: rotate(-.8deg);
	}
	.sk-brand .sk-hero .sk-seal:hover { transform: rotate(-.8deg) translateY(-2px); }
	.sk-brand .sk-hero .sk-seal__ring { inset: .3rem; border-radius: 11px; }
	.sk-brand .sk-hero .sk-seal__inner { flex-direction: row; align-items: center; gap: .8rem; text-align: left; }
	.sk-brand .sk-hero .sk-seal__kicker { font-size: .58rem; letter-spacing: .18em; white-space: nowrap; }
	.sk-brand .sk-hero .sk-seal__mark { max-width: 150px; max-height: 30px; }
	.sk-brand .sk-hero .sk-seal__sub,
	.sk-brand .sk-hero .sk-seal__cta { display: none; }
}

/* ================= Mobiles Ausklappmenue ================= */

.sk-brand .ct-panel .menu .sk-navitem,
.sk-brand #offcanvas .menu .sk-navitem { display: block; }
.sk-brand .ct-panel .menu .sk-navicon,
.sk-brand #offcanvas .menu .sk-navicon {
	display: flex !important; align-items: center; gap: .75rem;
	padding: .85rem 0 !important; width: 100%;
	border-radius: 0; background: none !important;
}
.sk-brand .ct-panel .menu .sk-navicon .sk-navicon__svg,
.sk-brand #offcanvas .menu .sk-navicon .sk-navicon__svg { width: 20px; height: 20px; opacity: .85; }
.sk-brand .ct-panel .menu .sk-navicon__label,
.sk-brand #offcanvas .menu .sk-navicon__label {
	display: inline !important; font-size: 1.02rem; font-weight: 600;
	letter-spacing: 0; text-transform: none; font-family: var(--sk-font-body);
}
/* Zaehler als kleines Abzeichen hinter dem Text, nicht als Balken */
.sk-brand .ct-panel .menu .sk-navicon__count,
.sk-brand #offcanvas .menu .sk-navicon__count {
	position: static !important; margin-left: auto;
	min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem;
	display: inline-grid; place-items: center; border-radius: 999px;
	background: rgba(255, 255, 255, .16); color: #fff;
	font-size: .74rem; font-weight: 700; box-shadow: none;
}
.sk-brand .ct-panel .menu .sk-navicon__count.is-filled,
.sk-brand #offcanvas .menu .sk-navicon__count.is-filled { background: var(--sk-ember); }
/* Das frühere Pseudo-Element entfaellt, der Text steht jetzt im Markup */
/* Die Gegenregel zum entfernten ::after ist damit gegenstandslos. Sie hat
   ohnehin nie gegriffen: Sie verlangt .menu in der Kette, im Ausklappmenue
   liegt der Eintrag aber nicht unterhalb eines Elements mit dieser Klasse. */
/* Trennlinie oberhalb der Kontogruppe */
.sk-brand .ct-panel .menu .sk-navitem--account,
.sk-brand #offcanvas .menu .sk-navitem--account {
	margin-top: .8rem; padding-top: .8rem;
	border-top: 1px solid rgba(255, 255, 255, .16);
}
/* Menuepunkte im Ausklappmenue gleichmaessig */
.sk-brand .ct-panel .menu > li > a,
.sk-brand #offcanvas .menu > li > a { padding: .85rem 0; font-size: 1.02rem; }
.sk-brand .ct-panel .menu .sk-nav-aktion > a,
.sk-brand #offcanvas .menu .sk-nav-aktion > a {
	background: var(--sk-fire); color: #fff !important; border-radius: 999px;
	padding: .7rem 1.1rem !important; margin: .4rem 0; align-self: flex-start;
	display: inline-flex !important; width: auto;
}

/* ================= Anmelden und Registrieren ================= */

.woocommerce-account:not(.logged-in) .woocommerce > .u-columns.customer-login,
.woocommerce-account .u-columns.col2-set {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.6rem; max-width: 880px; margin-inline: auto;
	background: transparent; border: 0; padding: 0;
}
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 {
	width: 100% !important; float: none !important; margin: 0 !important;
	background: #fff; border: 1px solid rgba(0, 0, 0, .09); border-radius: 14px; padding: 1.6rem;
}
.woocommerce-account .u-columns h2 {
	margin: 0 0 1rem !important; font-family: var(--sk-font-body) !important;
	font-size: 1.15rem !important; font-weight: 700 !important;
	text-transform: none !important; letter-spacing: 0 !important; color: var(--sk-text) !important;
}
.woocommerce-account .woocommerce-form { border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; max-width: none; }
.woocommerce-account .woocommerce-form .form-row { margin: 0 0 1rem; padding: 0; }
.woocommerce-account .woocommerce-form label:not(.woocommerce-form__label-for-checkbox) {
	display: block; margin: 0 0 .35rem; font-size: .88rem; font-weight: 600; color: var(--sk-text);
}
.woocommerce-account .woocommerce-form input[type="text"],
.woocommerce-account .woocommerce-form input[type="email"],
.woocommerce-account .woocommerce-form input[type="password"] {
	width: 100%; border: 1px solid rgba(0, 0, 0, .22); border-radius: 10px;
	padding: .85rem .9rem; font-size: 1rem; background: #fff;
}
.woocommerce-account .woocommerce-form .woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: flex !important; align-items: center; gap: .5rem;
	font-size: .9rem; font-weight: 400; margin: 0 0 1rem;
}
.woocommerce-account .woocommerce-form .button,
.woocommerce-account .woocommerce-form button[type="submit"] {
	width: 100%; margin: 0 0 .8rem;
	background: var(--sk-fire); color: #fff !important; border: 0; border-radius: 999px;
	padding: .9rem 1.4rem; font-family: var(--sk-font-head); text-transform: uppercase;
	letter-spacing: .05em; font-size: .95rem; box-shadow: var(--sk-shadow-red); cursor: pointer;
}
.woocommerce-account .woocommerce-LostPassword { margin: 0; font-size: .88rem; }
.woocommerce-account .woocommerce-LostPassword a { color: var(--sk-red) !important; }
.woocommerce-account .woocommerce-privacy-policy-text,
.woocommerce-account .u-columns .col-2 p:not(.form-row) {
	font-size: .88rem; line-height: 1.55; color: var(--sk-text-muted); margin: 0 0 1rem;
}
@media (max-width: 782px) {
	.woocommerce-account .u-columns .col-1,
	.woocommerce-account .u-columns .col-2 { padding: 1.2rem; }
}

/* Versandzeile: Bezeichnung links, Betrag rechts, eine Zeile */
body.sk-checkout #order_review .woocommerce-shipping-totals th { text-align: left !important; vertical-align: top; }
body.sk-checkout #order_review .woocommerce-shipping-totals td { text-align: right !important; }
body.sk-checkout #order_review #shipping_method,
body.sk-checkout #order_review .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
body.sk-checkout #order_review #shipping_method li,
body.sk-checkout #order_review .woocommerce-shipping-methods li { margin: 0; padding: 0; }


/* Warenkorb in der Kopfzeile: nur Symbol und Zaehler, die Beschriftung bleibt
   dem Ausklappmenue vorbehalten. Sonst rutscht das Zaehler-Abzeichen neben den Text. */
@media (min-width: 783px) {
	.sk-brand header.ct-header .sk-navicon--cart .sk-navicon__label { display: none; }
	.sk-brand header.ct-header .sk-navicon--cart { padding-right: .75rem; }
}

/* ================================================================
   Korrekturen aus dem Design-Audit vom 2026-08-05
   ================================================================ */

/* --- KRITISCH 1: Weiß auf dem Feuerverlauf war bis 1,66:1 -----------
   Der Verlauf startete bei Honiggelb. Für Textflächen ist er jetzt
   abgedunkelt (mind. 4,9:1); das helle Original bleibt als --sk-fire-deko
   für Flächen ohne Text erhalten. */
:root {
	--sk-fire: linear-gradient(120deg, #e07a05 0%, #c9430a 45%, #9d0208 100%);
	--sk-fire-deko: linear-gradient(120deg, #fcbf49 0%, #e85d04 52%, #9d0208 100%);
}
/* Zierelemente ohne Text dürfen weiterhin leuchten */
.sk-usp-ico, .sk-step-num, .sk-how__num, .sk-seal::after,
.sk-hero::before, .ember { background-image: var(--sk-fire-deko); }
.sk-how__num, .sk-step-num { background: var(--sk-fire-deko); }

/* --- KRITISCH 4: Mengenhinweis nur bei echtem Mangel rot ------------ */
.sk-minqty { color: var(--sk-red); }
.sk-minqty.is-info { color: var(--sk-text-muted); font-weight: 500; }
.sk-minqty.is-ok { color: #2f7a34; }

/* --- KRITISCH 5: Fehlerzustand der Formularfelder war nirgends definiert */
body.sk-checkout .form-row.woocommerce-invalid input,
body.sk-checkout .form-row.woocommerce-invalid select,
body.sk-checkout .form-row.woocommerce-invalid textarea,
.woocommerce-account .form-row.woocommerce-invalid input {
	border-color: #b21f24 !important;
	box-shadow: 0 0 0 3px rgba(178, 31, 36, .2);
}
body.sk-checkout .form-row.woocommerce-invalid label:not(.checkbox) { color: #b21f24 !important; }
body.sk-checkout .form-row.woocommerce-validated input,
body.sk-checkout .form-row.woocommerce-validated select { border-color: #2f7a34 !important; }

/* --- HOCH 6 und 7: Fokus war mit 1,00–1,55:1 praktisch unsichtbar ----
   Zweifarbiger Ring, damit er auf hellen wie auf orangen Flächen steht. */
.sk-brand :focus-visible,
body.sk-checkout :focus-visible,
.woocommerce-account :focus-visible {
	outline: 3px solid #17110c !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px #fcbf49 !important;
	border-radius: 4px;
}
body.sk-checkout .form-row input:focus-visible,
body.sk-checkout .form-row select:focus-visible,
body.sk-checkout .form-row textarea:focus-visible,
.sk-cform input:focus-visible, .sk-cform textarea:focus-visible {
	outline: 3px solid #9d0208 !important; outline-offset: 2px !important;
	box-shadow: none !important; border-color: var(--sk-ember) !important;
}

/* --- HOCH 8: Es gab keinen einzigen deaktivierten Zustand ----------- */
.sk-brand .sk-btn:disabled, .sk-brand button:disabled,
.sk-brand .button.disabled, .sk-brand .button:disabled,
body.sk-checkout #place_order:disabled, .sk-co-coupon__btn:disabled {
	background: #c9c3ba !important; background-image: none !important;
	color: #4a443c !important; box-shadow: none !important;
	cursor: not-allowed !important; transform: none !important;
	filter: none !important; opacity: 1;
}

/* --- HOCH 9: Zeilenlänge auf den Textseiten lag bei ~150 Zeichen ---- */
.page .entry-content > p,
.page .entry-content > ul,
.page .entry-content > ol,
.page .entry-content > h2,
.page .entry-content > h3 { max-width: 68ch; }
.page .entry-content > table { max-width: 68ch; }

/* --- HOCH 10: Versalien nur noch für kurze Auszeichnungen ----------- */
.sk-brand h1, .sk-brand h2, .sk-brand h3,
.sk-brand h4, .sk-brand h5, .sk-brand h6 {
	text-transform: none;
	letter-spacing: -0.005em;
}
.sk-brand .sk-hero h1,
.sk-brand .sk-eyebrow > span,
.sk-brand .sk-btn, .sk-brand .wp-block-button__link,
.sk-brand .sk-duel__title, .sk-brand .sk-promo__flag,
.sk-brand .sk-promo__cta, .sk-brand .sk-navicon__label,
.sk-brand .sk-seal__kicker, .sk-brand .sk-seal__cta { text-transform: uppercase; }

/* --- HOCH 11: Antippbare Symbole waren 32×34 px statt 44×44 px ------ */
.sk-brand header.ct-header .sk-navicon {
	min-width: 44px; min-height: 44px; padding: .55rem; justify-content: center;
}
@media (max-width: 999.98px) {
	.sk-brand header.ct-header .sk-navicon { padding: .55rem .45rem; }
}
/* Entfernen-Symbol im Warenkorb war 10×10 px */
.sk-brand .woocommerce a.remove {
	display: grid !important; place-items: center;
	width: 44px !important; height: 44px !important; border-radius: 50%;
}
.sk-brand .woocommerce a.remove svg { width: 14px; height: 14px; }

/* --- HOCH 15: Feldrahmen lagen bei 1,53–1,69:1, nötig sind 3:1 ------ */
body.sk-checkout .form-row input[type="text"],
body.sk-checkout .form-row input[type="email"],
body.sk-checkout .form-row input[type="tel"],
body.sk-checkout .form-row input[type="password"],
body.sk-checkout .form-row textarea,
body.sk-checkout .form-row select,
.sk-cform input, .sk-cform textarea,
.woocommerce-account .woocommerce-form input,
.woocommerce-account .woocommerce-MyAccount-content input,
.sk-co-coupon input { border-color: #8a8178 !important; }
.sk-gift-card .sk-btn--ghost { border-color: #6b5d4d; }

/* --- HOCH 16: Shop-Bild wurde von quadratisch auf 4:3 beschnitten --- */
.sk-shop-solo ul.products li.product > figure img { aspect-ratio: 1 / 1 !important; }

/* --- MITTEL 24: Versandrechner und doppelte Steuerzeile im Warenkorb  */
.woocommerce-cart .woocommerce-shipping-calculator { display: none; }
.woocommerce-cart tr.order-tax { display: none; }

/* --- MITTEL 30: Grundpreis lag auf Creme bei 4,44:1 ----------------- */
.sk-brand .price-unit,
.sk-brand .wc-gzd-additional-info.unit-price {
	color: #6b5d4d !important; font-size: .8rem !important;
}

/* --- MITTEL 31: Warenkorbzähler im gefüllten Zustand bei 3,50:1 ----- */
.sk-navicon__count.is-filled { background: #9d0208; }
/* NIEDRIG 38: bei leerem Warenkorb kein Abzeichen */
.sk-navicon__count:not(.is-filled) { display: none; }

/* --- NIEDRIG 39: Sprungziel reservierte 96 px bei 58 px Kopfzeile --- */
#geschenk, #faq, #zubereitung { scroll-margin-top: 72px; }

/* --- KRITISCH 3: Express-Bereich nur zeigen, wenn er etwas enthält -- */
.sk-co-express:not(:has(.sk-co-express__slot button)):not(:has(.sk-co-express__slot iframe)) { display: none; }
/* Hier stand eine Regel, die leere Wallet-Kaesten per :has() ausgeblendet
   hat. Sie ist entfernt: PayPals Plugin setzt bei fehlender Eignung selbst
   einen Inline-Stil display:none (gemessen am 15.09.2026 am Container:
   style="margin-top: 14px; display: none;"). Die Regel war damit ueberfluessig
   und stand nur als moegliche Fehlerquelle im Weg, als Apple Pay ausfiel. */

.sk-co-express[hidden] + .sk-co-or, .sk-co-or[hidden] { display: none !important; }

/* Hinweisbox zum fehlenden Widerrufsrecht an der Kasse */
.sk-checkout-hinweis {
	margin: .8rem 0 0; padding: .85rem 1rem;
	border: 1px solid rgba(157, 2, 8, .25); border-left: 4px solid var(--sk-red);
	border-radius: 10px; background: rgba(157, 2, 8, .05);
	font-size: .86rem; line-height: 1.5; color: var(--sk-text);
}
.sk-checkout-hinweis strong { color: var(--sk-red); }

/* Kleingedrucktes bei den Aktionspreisen */
.sk-gift-card__legal {
	display: block; margin-top: .35rem;
	font-size: .72rem; line-height: 1.4; color: var(--sk-text-muted);
}
.sk-gift-card__legal a { color: var(--sk-red); }

/* Pflichtangaben in der Sticky-Leiste */
.sk-sticky-cta__price small { display: block; }
.sk-sticky-cta__legal { display: block; font-size: .68rem; opacity: .8; }

/* --- Konto und Warenkorb auch mobil direkt in der Kopfzeile -------------
   Vorher steckten beide hinter dem Burger. Sichtbare Symbole zeigen sofort,
   dass es sich um einen Shop mit Kundenkonto handelt. */
.sk-mnav {
	display: flex !important;
	flex-direction: row;
	flex-wrap: nowrap;
	flex-shrink: 0;
	align-items: center;
	gap: .1rem;
	margin-left: auto;
}
.sk-mnav .sk-navicon {
	flex: 0 0 auto;
	min-width: 40px;
	min-height: 44px;
	padding: .45rem .3rem;
	justify-content: center;
	color: #fff;
}
.sk-mnav .sk-navicon__label { display: none; }
.sk-mnav .sk-navicon-wrap { display: inline-flex; flex: 0 0 auto; }
/* Im aufgeklappten Menue braucht es die Symbole dann nicht doppelt. */
#offcanvas .sk-navitem--account,
#offcanvas .sk-navitem--cart { display: none; }

/* Das Logo war mobil 252 px breit und lief unter die Symbole. Gemessen bleiben
   bei 390 px Fensterbreite rund 145 px fuer Symbole und Burger noetig. */
[data-device="mobile"] [data-id="logo"] img,
[data-device="mobile"] [data-id="logo"] svg {
	max-width: 165px;
	height: auto;
}

/* --- R13: Ablehnen und Annehmen gleichwertig gestalten ------------------
   Vorher war "Alle akzeptieren" ein grosser Farbknopf und "Nur notwendige"
   nur ein Umriss. Beide Wege muessen gleich leicht fallen; unterschiedlich
   ist jetzt allein die Farbe. */
.sk-consent__btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.sk-consent__btn--gleich {
	flex: 1 1 0;
	min-width: 9rem;
	padding: .7rem .9rem;
	border: 0;
	border-radius: 999px;
	font-family: var(--sk-font-head);
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	box-shadow: 0 6px 18px rgba(23, 17, 12, .18);
	background: #2a2018;
	color: #fff;
}
.sk-consent__btn--gleich.sk-consent__btn--all {
	background: var(--sk-fire);
	color: #fff;
	box-shadow: var(--sk-shadow-red);
}
.sk-consent__btn--gleich:hover { filter: brightness(1.08); }

/* "Einstellungen" ist die nachrangige Wahl und darf schlichter sein. */
.sk-consent__mehr { margin-top: .6rem; text-align: center; }
.sk-consent__link {
	background: none;
	border: 0;
	padding: .35rem .2rem;
	font-size: .82rem;
	color: var(--sk-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.sk-consent__link:hover { color: var(--sk-text); }

/* --- Siegel gerade stellen ------------------------------------------------
   Die leichte Drehung liess die Wortmarke verzerrt wirken, weil Text in einem
   gedrehten Kasten auf dem Bildschirm neu gerastert wird. Jetzt steht das
   Siegel gerade - auf allen Breiten, auch beim Ueberfahren mit der Maus. */
.sk-brand .sk-seal,
.sk-brand .sk-hero .sk-seal { transform: none; }
.sk-brand .sk-seal:hover,
.sk-brand .sk-hero .sk-seal:hover { transform: translateY(-3px); }

/* Im Hero etwas hoeher, damit es frei ueber der Fleischspiess-Diagonale sitzt. */
@media (min-width: 1100px) {
	.sk-brand .sk-hero .sk-seal-wrap { top: 26%; }
}

/* --- Textseiten: eine einzige Lesespalte ---------------------------------
   Die frühere Regel begrenzte jedes Element auf 68ch. Weil "ch" von der
   Schriftgröße des Elements abhängt, ergab das je Ebene eine andere Breite
   (H2 1735 px, H3 1137 px, Absatz 729 px). Zusammen mit den auto-Rändern des
   Themes entstand daraus eine Treppe. Jetzt teilen sich Titel und Inhalt
   dieselbe Spalte. */
.sk-textseite .entry-content > *,
.sk-textseite .hero-section .entry-header {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
}
.sk-textseite .hero-section { padding-bottom: .5rem; }
.sk-textseite .entry-content > h2 { margin-top: 2.6rem; }
.sk-textseite .entry-content > h3 { margin-top: 1.9rem; }
.sk-textseite .entry-content > p,
.sk-textseite .entry-content > ul,
.sk-textseite .entry-content > ol { margin-top: .8rem; line-height: 1.65; }
.sk-textseite .entry-content > table { max-width: 46rem; margin-left: auto; margin-right: auto; }

/* Die alte 68ch-Regel darf nicht mehr greifen. */
.page .entry-content > p,
.page .entry-content > ul,
.page .entry-content > ol,
.page .entry-content > h2,
.page .entry-content > h3,
.page .entry-content > table { max-width: none; }

/* --- Kontoseite: Wert im Feld "Land / Region" wurde unten abgeschnitten ---
   Die Felder bekommen fuer die schwebenden Beschriftungen oben zusaetzliche
   Polsterung. Beim Laenderfeld steht die Beschriftung aber darueber, also
   schob die Polsterung den Wert aus dem sichtbaren Bereich. */
.woocommerce-account .woocommerce-address-fields select,
.woocommerce-account .woocommerce-address-fields .select2-selection--single,
.woocommerce-account .woocommerce-address-fields input[type="text"][readonly] {
	height: auto;
	min-height: 3rem;
	padding-top: .75rem;
	padding-bottom: .75rem;
	line-height: 1.4;
}
.woocommerce-account .woocommerce-address-fields .select2-selection--single .select2-selection__rendered {
	line-height: 1.4;
	padding-left: 0;
}

/* --- Siegel: Inhalt mittig, Kicker lesbar --------------------------------
   "Ein Produkt vom" stand in Honiggelb auf dem orangenen Verlauf - das
   ergab rund 1,9:1 und war kaum zu entziffern. Weiss mit leichtem Schatten
   liegt bei ueber 4,5:1 und passt zur Wortmarke darunter. */
.sk-brand .sk-seal__kicker {
	color: #fff;
	font-size: .72rem;
	letter-spacing: .22em;
	text-shadow: 0 1px 2px rgba(23, 17, 12, .5);
}
/* Der Inhalt klebte oben im Kasten. */
.sk-brand .sk-seal {
	display: flex;
	align-items: center;
	justify-content: center;
}
.sk-brand .sk-seal__inner {
	justify-content: center;
	width: 100%;
}

/* Die Reset-Regel oben ist spezifischer als ".sk-textseite .entry-content > *"
   und hatte die Lesespalte wieder aufgehoben. Hier gewinnt sie zurueck. */
body.sk-textseite .entry-content > *,
body.sk-textseite .entry-content > p,
body.sk-textseite .entry-content > ul,
body.sk-textseite .entry-content > ol,
body.sk-textseite .entry-content > h2,
body.sk-textseite .entry-content > h3,
body.sk-textseite .entry-content > table {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
}
/* Titel in dieselbe Spalte und auf Lesegroesse. */
body.sk-textseite .hero-section .entry-header { text-align: left; }
body.sk-textseite h1.page-title {
	font-size: clamp(1.9rem, 3.4vw, 2.7rem);
	line-height: 1.15;
	margin-bottom: .4rem;
}

/* --- Siegel im Hero: dunkle Fassung (Kundenwahl) -------------------------
   Statt einer Flaeche in Weiss drei unterscheidbare Toene: Honiggelb fuer
   Kicker und Handlungsaufruf, Weiss fuer die Wortmarke, Creme fuer die
   Unterzeile. Entspricht zugleich der dunklen Grundfassung des Siegels auf
   den uebrigen Seiten. */
.sk-brand .sk-hero .sk-seal {
	background: linear-gradient(158deg, #241109 0%, #17110c 55%, #2b1a12 100%);
}
.sk-brand .sk-hero .sk-seal::after {
	background: radial-gradient(70% 120% at 15% 110%, rgba(232, 93, 4, .42), rgba(0, 0, 0, 0) 62%);
}
.sk-brand .sk-hero .sk-seal__kicker {
	color: var(--sk-honey);
	text-shadow: none;
}
.sk-brand .sk-hero .sk-seal__sub { color: #e8d9c6; }
.sk-brand .sk-hero .sk-seal__cta {
	color: var(--sk-honey);
	border-color: rgba(252, 191, 73, .5);
}
.sk-brand .sk-hero .sk-seal__ring { border-color: rgba(252, 191, 73, .3); }
.sk-brand .sk-hero .sk-seal:hover .sk-seal__cta { color: #fff; border-color: #fff; }

/* --- Bestelluebersicht: Rangfolge in der Produktzeile ---------------------
   Die Merkmale liefen mit 15,2 px und "inline" - also genauso gross wie der
   Produktname und ohne eigene Zeile. Zusammen mit der Germanized-Zeile
   "Produkt enthaelt" ergab das drei gleich laute Textbloecke. Jetzt: Name
   fuehrt, darunter zwei ruhige Zusatzzeilen mit gleichem Abstand. */
.woocommerce-checkout-review-order-table td.product-name,
.woocommerce-checkout-review-order-table td.product-name * { text-align: left; }

.woocommerce-checkout-review-order-table td.product-name .wc-gzd-cart-item-name-wrapper {
	margin-bottom: .1rem;
}
.woocommerce-checkout-review-order-table td.product-name .wc-gzd-cart-info.units-info,
.woocommerce-checkout-review-order-table td.product-name .sk-co-merkmale {
	display: block;
	margin: .3rem 0 0;
	font-size: .78rem;
	line-height: 1.5;
	color: var(--sk-text-muted);
}
.woocommerce-checkout-review-order-table td.product-name .sk-co-merkmale strong {
	color: var(--sk-text);
	font-weight: 600;
}
/* Das Geschenk-Schild brauchte drei Zeilen und drueckte den Rest auseinander. */
.woocommerce-checkout-review-order-table td.product-name .sk-gift-tag {
	display: inline-block;
	margin-top: .3rem;
	padding: .25rem .55rem;
	font-size: .72rem;
	line-height: 1.35;
}
/* Etwas Luft zwischen den Positionen, dafuer weniger innerhalb. */
.woocommerce-checkout-review-order-table tr.cart_item td { padding-top: .85rem; padding-bottom: .85rem; }

/* Alle Textzeilen der Position stehen in einer Flucht neben dem Vorschaubild.
   Das Bild liegt absolut, die Textspalte entsteht ueber die linke Polsterung
   von 4.4rem - die Merkmale hatten sie nicht und liefen unter das Bild. */
.woocommerce-checkout-review-order-table td.product-name .wc-gzd-cart-item-name-wrapper,
.woocommerce-checkout-review-order-table td.product-name .wc-gzd-cart-info.units-info,
.woocommerce-checkout-review-order-table td.product-name .sk-co-merkmale {
	padding-left: 4.4rem;
}

/* --- Kopfzeile und Hero nach dem Vorbild partyservice-grillborzer.de ------
   Werte am 2026-08-06 direkt von der Schwesterseite ausgelesen, nicht
   geschaetzt. */

/* Kopfzeile: rgba(26,20,16,.94) statt des bisherigen Schwarzbrauns */
.sk-brand header.ct-header [data-row="middle"],
.sk-brand header.ct-header [data-device] > [data-row] {
	background-color: rgba(26, 20, 16, .94) !important;
}
.sk-brand header.ct-header .menu-item > a,
.sk-brand header.ct-header nav a {
	color: rgba(255, 255, 255, .92);
	font-size: .8rem;          /* 12,8 px */
	font-weight: 600;
	letter-spacing: .02em;     /* 0,256 px */
	text-transform: uppercase;
	padding: .55rem .7rem;     /* 8,8 / 11,2 px */
	border-radius: 6px;
}
.sk-brand header.ct-header .menu-item > a:hover { color: #fff; }

/* Das neue Schaschlik-Logo im Hero, ueber dem Abzeichen */
.sk-brand .sk-hero .sk-heromark {
	display: block;
	line-height: 0;
	margin: 0 0 .9rem;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .55));
}
.sk-brand .sk-hero .sk-heromark img {
	display: block;
	width: 180px;
	height: auto;
}
@media (max-width: 1099px) {
	.sk-brand .sk-hero .sk-heromark img { width: 140px; }
	.sk-brand .sk-hero .sk-heromark { margin-bottom: .7rem; }
}

/* Abzeichen im Hero: Umriss-Pille in Honiggelb statt gefuellter Pille */
.sk-brand .sk-hero .sk-eyebrow > span {
	color: #fcbf49;
	background: rgba(252, 191, 73, .16);
	background-image: none;
	border: 1px solid rgba(252, 191, 73, .4);
	border-radius: 999px;
	font-size: .8125rem;       /* 13 px */
	font-weight: 600;
	letter-spacing: .2em;      /* 2,6 px */
	text-transform: uppercase;
	padding: .4rem 1rem;       /* 6,4 / 16 px */
	box-shadow: none;
}

/* Farbverlauf-Wort in der Hero-Schlagzeile, Werte 1:1 von
   partyservice-grillborzer.de uebernommen. */
.sk-brand .sk-hero h1 .sk-fireword {
	background-image: linear-gradient(90deg, #fcbf49 0%, #e85d04 45%, #9d0208 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
/* Ohne background-clip (aeltere Browser) bleibt der Text sonst unsichtbar. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.sk-brand .sk-hero h1 .sk-fireword {
		background-image: none;
		color: #fcbf49;
		-webkit-text-fill-color: #fcbf49;
	}
}

/* --- Kopfzeile exakt auf Vorlagenmass ------------------------------------
   partyservice-grillborzer.de: Logo 187x34, Zeilenhoehe 58 px. */
.sk-brand header.ct-header [data-id="logo"] img,
.sk-brand header.ct-header .site-logo-container img {
	width: 187px;
	height: auto;
	max-width: 187px;
}
.sk-brand header.ct-header [data-row="middle"] {
	min-height: 58px;
	padding-top: 0;
	padding-bottom: 0;
}
@media (max-width: 999.98px) {
	.sk-brand header.ct-header [data-id="logo"] img,
	.sk-brand header.ct-header .site-logo-container img {
		width: 150px;
		max-width: 150px;
	}
	.sk-brand header.ct-header [data-row="middle"] { min-height: 54px; }
}

/* --- Mobiler Hero: gleichmaessiger vertikaler Rhythmus -------------------
   Gemessen waren die Abstaende 11 / 14 / 10 / 19 / 26 px - also unruhig.
   Jetzt zwei klare Stufen: 14 px innerhalb einer Sinneinheit, 24 px
   zwischen den Bloecken. */
@media (max-width: 1099px) {
	.sk-brand .sk-hero .sk-heromark      { margin: 0 0 .9rem; }
	.sk-brand .sk-hero .sk-eyebrow       { margin: 0 0 1rem; }
	.sk-brand .sk-hero h1                { margin: 0 0 .9rem; }
	.sk-brand .sk-hero .sk-lead          { margin: 0 0 1.5rem; }
	.sk-brand .sk-hero .wp-block-buttons { margin: 0 0 1.5rem; }
	.sk-brand .sk-hero .sk-trustrow      { margin: 0; gap: .5rem 1.1rem; }
}

/* Die Zeile blieb trotz min-height bei 63 px: eine Restpolsterung von
   2,5 px oben und unten plus die Standardhoehe des Themes. */
.sk-brand header.ct-header [data-row="middle"] {
	height: 58px;
	padding: 0;
}
.sk-brand header.ct-header [data-row="middle"] > .ct-container,
.sk-brand header.ct-header [data-row="middle"] > .ct-container-fluid {
	height: 100%;
	align-items: center;
}
@media (max-width: 999.98px) {
	.sk-brand header.ct-header [data-row="middle"] { height: 54px; }
}

/* --- Kopfzeile senkrecht mittig ------------------------------------------
   Der Logo-Container war ein Block mit fester Hoehe 50 px; das 34 px hohe
   Bild klebte darin oben (7 px oben, 17 px unten). Menuelinks und Symbole
   wurden ausserdem auf die volle Zeilenhoehe gestreckt. */
.sk-brand header.ct-header .site-logo-container,
.sk-brand header.ct-header [data-id="logo"] > a {
	display: flex;
	align-items: center;
	height: auto;
	min-height: 0;
}
.sk-brand header.ct-header .menu-item > a,
.sk-brand header.ct-header nav a,
.sk-brand header.ct-header .sk-navicon {
	align-self: center;
	height: auto;
	min-height: 0;
}
/* Antippbare Flaeche der Symbole bleibt trotzdem gross genug. */
.sk-brand header.ct-header .sk-navicon {
	min-width: 44px;
	padding: .5rem;
}

/* Die Zeile behielt 2,5 px Polsterung oben und unten, dadurch sass alles
   um denselben Betrag zu tief. */
.sk-brand header.ct-header [data-device] [data-row="middle"] {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* --- Kasse: drei Layoutfehler aus der mobilen Durchsicht ------------------
   Gemessen am 2026-08-07 bei 390 px Fensterbreite. */

/* 1) Die schwebende Beschriftung sass auf der Fehlermeldung.
      Sie stand absolut bei top:29,6px in einem 59px hohen Feld - ohne
      Ausgleich ihrer eigenen Hoehe lief sie unten heraus. */
body.sk-checkout .form-row > label:not(.checkbox):not(.screen-reader-text),
.woocommerce-account .form-row > label:not(.checkbox):not(.screen-reader-text) {
	top: 50%;
	transform: translateY(-50%);
	transform-origin: left center;
}
/* Im angehobenen Zustand wieder an den oberen Rand. */
body.sk-checkout .form-row:focus-within > label:not(.checkbox):not(.screen-reader-text),
body.sk-checkout .form-row:has(input:not(:placeholder-shown)) > label:not(.checkbox):not(.screen-reader-text),
body.sk-checkout .form-row:has(select) > label:not(.checkbox):not(.screen-reader-text),
body.sk-checkout .form-row:has(textarea:not(:placeholder-shown)) > label:not(.checkbox):not(.screen-reader-text),
.woocommerce-account .form-row:focus-within > label:not(.checkbox):not(.screen-reader-text),
.woocommerce-account .form-row:has(input:not(:placeholder-shown)) > label:not(.checkbox):not(.screen-reader-text) {
	top: .55rem;
	transform: translateY(0) scale(.82);
}
/* Fehlertext braucht Luft zum Feld. */
body.sk-checkout .form-row .woocommerce-error,
body.sk-checkout .form-row > .error,
body.sk-checkout .form-row small.error {
	display: block;
	margin-top: .35rem;
	font-size: .8rem;
	line-height: 1.4;
}

/* 2) Sammelmeldung oben: die Fehlerknoepfe liefen aus dem roten Kasten. */
.sk-brand .woocommerce-error {
	overflow: hidden;
	box-sizing: border-box;
}
.sk-brand .woocommerce-error li {
	max-width: 100%;
	overflow-wrap: anywhere;
}
.sk-brand .woocommerce-error li a,
.sk-brand .woocommerce-error li > * {
	display: inline;
	white-space: normal;
	overflow-wrap: anywhere;
	max-width: 100%;
}

/* 3) Das Sternchen der AGB-Zeile rutschte auf eine eigene Zeile.
      Das Label war display:inline mit gap - gap wirkt dort nicht. */
body.sk-checkout .woocommerce-terms-and-conditions-wrapper label,
body.sk-checkout .validate-required > label.checkbox {
	display: block;
	position: relative;
	padding-left: 1.75rem;
	gap: 0;
	line-height: 1.5;
}
body.sk-checkout .woocommerce-terms-and-conditions-wrapper label > input[type="checkbox"],
body.sk-checkout .validate-required > label.checkbox > input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: .2rem;
	margin: 0;
}
body.sk-checkout .woocommerce-terms-and-conditions-wrapper .required,
body.sk-checkout .validate-required > label.checkbox .required {
	display: inline;
	margin-left: .15em;
	white-space: nowrap;
	text-decoration: none;
	border: 0;
}

/* Die aeltere Beschriftungsregel arbeitet mit !important - hier gewinnt die
   korrigierte Position zurueck. Ruhezustand senkrecht mittig, angehoben oben. */
body.sk-checkout .form-row > label:not(.checkbox):not(.screen-reader-text),
.woocommerce-account .form-row > label:not(.checkbox):not(.screen-reader-text) {
	top: 50% !important;
	transform: translateY(-50%) !important;
}
body.sk-checkout .form-row:focus-within > label:not(.checkbox):not(.screen-reader-text),
body.sk-checkout .form-row:has(input:not(:placeholder-shown)) > label:not(.checkbox):not(.screen-reader-text),
body.sk-checkout .form-row:has(select) > label:not(.checkbox):not(.screen-reader-text),
body.sk-checkout .form-row:has(textarea:not(:placeholder-shown)) > label:not(.checkbox):not(.screen-reader-text),
.woocommerce-account .form-row:focus-within > label:not(.checkbox):not(.screen-reader-text),
.woocommerce-account .form-row:has(input:not(:placeholder-shown)) > label:not(.checkbox):not(.screen-reader-text) {
	top: .5rem !important;
	transform: translateY(0) scale(.82) !important;
}

/* Korrektur der Korrektur: "top: 50%" bezieht sich auf die Feldzeile, nicht
   auf das Eingabefeld. Sobald darunter ein Fehlertext steht, waechst die
   Zeile von 59 auf rund 110 px - die Haelfte davon liegt dann UNTER dem Feld,
   genau auf der Fehlermeldung. Deshalb ein fester Versatz: das Feld ist
   59 px hoch, die Beschriftung 18 px, mittig sind das 20,5 px. */
body.sk-checkout .form-row > label:not(.checkbox):not(.screen-reader-text),
.woocommerce-account .form-row > label:not(.checkbox):not(.screen-reader-text) {
	top: 1.28rem !important;
	transform: none !important;
}
body.sk-checkout .form-row:focus-within > label:not(.checkbox):not(.screen-reader-text),
body.sk-checkout .form-row:has(input:not(:placeholder-shown)) > label:not(.checkbox):not(.screen-reader-text),
body.sk-checkout .form-row:has(select) > label:not(.checkbox):not(.screen-reader-text),
body.sk-checkout .form-row:has(textarea:not(:placeholder-shown)) > label:not(.checkbox):not(.screen-reader-text),
.woocommerce-account .form-row:focus-within > label:not(.checkbox):not(.screen-reader-text),
.woocommerce-account .form-row:has(input:not(:placeholder-shown)) > label:not(.checkbox):not(.screen-reader-text) {
	top: .45rem !important;
	transform: scale(.82) !important;
	transform-origin: left top !important;
}

/* --- PayPal-Kartenfelder: doppelte Beschriftung ---------------------------
   Die Kartenfelder liegen in iframes von PayPal und bringen einen eigenen
   Platzhalter mit ("Kartennummer"). Darüber lag zusätzlich unsere schwebende
   Beschriftung - der Text stand also zweimal da. Unsere wird optisch
   entfernt, bleibt aber für Screenreader erhalten. */
body.sk-checkout .payment_method_ppcp-credit-card-gateway .form-row > label:not(.checkbox),
body.sk-checkout li.payment_method_ppcp-credit-card-gateway label[for^="ppcp"],
body.sk-checkout .ppcp-card-fields label,
body.sk-checkout #ppcp-credit-card-gateway-card-number-label,
body.sk-checkout #ppcp-credit-card-gateway-card-expiry-label,
body.sk-checkout #ppcp-credit-card-gateway-card-cvc-label,
body.sk-checkout #ppcp-credit-card-gateway-card-name-label {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

/* Die Felder brauchen dann keine Extra-Polsterung oben mehr. */
body.sk-checkout .payment_method_ppcp-credit-card-gateway .form-row input,
body.sk-checkout .ppcp-card-fields iframe {
	padding-top: .8rem !important;
	padding-bottom: .8rem !important;
	min-height: 3rem;
}
body.sk-checkout .payment_method_ppcp-credit-card-gateway .form-row { margin-bottom: .7rem; }

/* ==========================================================================
   Korrekturen aus dem Kassen-Audit vom 2026-08-09
   ========================================================================== */

/* K1 - Die Reihenfolge adressierte eine Germanized-Struktur, die es im DOM
   nicht mehr gibt. Folge: Bestellbutton stand ueber Produktliste und
   Gesamtsumme (354 px Desktop, 410 px mobil) - Verstoss gegen 312j BGB. */
body.sk-checkout #order_review > input                          { order: 0; }
body.sk-checkout #order_review > h3:first-of-type               { order: 1; }
body.sk-checkout #order_review > table.shop_table               { order: 2; }
body.sk-checkout #order_review > .wc-gzd-heading-moved          { order: 3; }
body.sk-checkout #order_review > .woocommerce-checkout-payment  { order: 4; }
body.sk-checkout #order_review > .wc-gzd-checkbox-placeholder   { order: 5; }
body.sk-checkout #order_review > .wc-gzd-order-submit           { order: 6; }

/* H4 - Weiss auf der hellen Verlaufshaelfte ergab 3,16:1 statt 4,5:1. */
:root { --sk-fire-cta: linear-gradient(120deg, #c94f03 0%, #a8330a 52%, #7d0206 100%); }
body.sk-checkout #place_order,
.wc-proceed-to-checkout a.checkout-button,
.sk-consent__btn--gleich.sk-consent__btn--all,
.sk-brand .sk-btn--fire { background: var(--sk-fire-cta) !important; }
.woocommerce-cart-form .coupon button,
.sk-co-coupon__btn { background: #b34503 !important; color: #fff !important; }

/* H5 - Fehlerkasten lag bei 3,79:1. */
body.sk-checkout ul.woocommerce-error,
.sk-brand ul.woocommerce-error {
	background: #a8121f !important;
	color: #fff !important;
	font-size: .95rem;
}
.sk-brand ul.woocommerce-error a { color: #fff; text-decoration: underline; }

/* H6 - Tabelle ragte 36 px, Zahlungsblock 2 px aus dem Kasten. */
@media (max-width: 689.98px) {
	body.sk-checkout #order_review > .woocommerce-checkout-payment { margin-inline: 0 !important; }
}
body.sk-checkout #order_review table.shop_table { table-layout: fixed; width: 100%; }
body.sk-checkout #order_review table.shop_table td,
body.sk-checkout #order_review table.shop_table th { overflow-wrap: anywhere; }

/* H7 - Fehlerhafte Felder sahen aus wie fehlerfreie (identischer Rahmen). */
body.sk-checkout .form-row.woocommerce-invalid input,
body.sk-checkout .form-row.woocommerce-invalid select,
body.sk-checkout .form-row.woocommerce-invalid textarea {
	border-color: #b21f24 !important;
	border-width: 2px !important;
}
body.sk-checkout .form-row.woocommerce-invalid > label:not(.checkbox) { color: #b21f24 !important; }
body.sk-checkout .form-row.woocommerce-validated input { border-color: #2f7a34 !important; }
/* Ausgeblendete Lieferfelder duerfen nicht als fehlerhaft gelten. */
body.sk-checkout .shipping_address .form-row.woocommerce-invalid input { border-color: #8a8178 !important; border-width: 1px !important; }

/* M6 - Gutscheinzeile war unten um 16 px versetzt. */
.sk-co-coupon { align-items: stretch; }
.sk-co-coupon input { height: auto; min-height: 3rem; }
.sk-co-coupon__btn { min-height: 3rem; padding-block: 0; }

/* M7 - Versandzeile lief rechtsbuendig ueber beide Spalten. */
body.sk-checkout #order_review .woocommerce-shipping-totals td,
.woocommerce-cart .woocommerce-shipping-totals td { text-align: left; }
body.sk-checkout #order_review .ct-shipping-heading,
.woocommerce-cart .ct-shipping-heading { text-align: left; font-weight: 600; }
body.sk-checkout #order_review #shipping_method li,
.woocommerce-cart #shipping_method li { display: flex; justify-content: space-between; gap: .5rem; }

/* M8 - Steuerzeile brach mitten im Klammerausdruck um. */
body.sk-checkout #order_review .order-total small.includes_tax,
.woocommerce-cart .order-total small.includes_tax {
	display: block; margin-top: .2rem; white-space: nowrap; font-size: .78rem;
}

/* M11 + M12 - Tippflaechen unter 44 px, Rahmen bei 1,15:1. */
body.sk-checkout input[type="checkbox"],
body.sk-checkout input[type="radio"],
.woocommerce-cart input[type="checkbox"] {
	width: 22px; height: 22px;
	accent-color: var(--sk-ember);
	border: 1px solid #767676;
}
.sk-co-foot a { display: inline-block; padding: .6rem .4rem; }

/* M9 - Adresszusatz erschien als leerer Kasten ohne Beschriftung. */
body.sk-checkout #billing_address_2_field > label.screen-reader-text,
body.sk-checkout #shipping_address_2_field > label.screen-reader-text {
	position: absolute !important;
	width: auto; height: auto; margin: 0; overflow: visible;
	clip: auto; clip-path: none; white-space: nowrap;
}

/* N8 - Bestellhinweise waren mit 170 px hoeher als jedes Pflichtfeld. */
body.sk-checkout #order_comments { min-height: 5rem; height: 5rem; }

/* H3 - Die beiden Kaufknoepfe im Warenkorb klebten mit 0 px aneinander. */
.wc-proceed-to-checkout { display: flex; flex-direction: column; gap: .75rem; }
.wc-proceed-to-checkout .ppc-button-wrapper { margin: 0; }
.wc-proceed-to-checkout .ppc-button-wrapper::before {
	content: "oder direkt bezahlen mit";
	display: block; text-align: center; margin-bottom: .4rem;
	font-size: .82rem; color: var(--sk-text-muted);
}

/* --- Shopify-Aufbau: Zahlung links, rechts nur Produkt und Summen -------- */
.sk-co-zahlung { margin-top: .6rem; }
.sk-co-zahlung .woocommerce-checkout-payment {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
}
.sk-co-section--pay { margin-top: 2rem; }
.sk-co-section__hint {
	margin: -.4rem 0 .9rem;
	font-size: .85rem;
	color: var(--sk-text-muted);
}
/* Rechte Spalte enthaelt jetzt nur noch Produkt und Summen. */
body.sk-checkout #order_review > .woocommerce-checkout-payment:empty { display: none; }

/* Kompakte Summe direkt ueber dem Bestellbutton - Pflichtangaben nach
   Paragraph 312j Abs. 2 BGB muessen dort stehen, wo bestellt wird. */
.sk-co-endsumme {
	margin: 1.1rem 0 .9rem;
	padding: .9rem 1rem;
	border: 1px solid rgba(23, 17, 12, .14);
	border-radius: 12px;
	background: #fff;
}
.sk-co-endsumme__zeile {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .22rem 0;
	font-size: .92rem;
}
.sk-co-endsumme__zeile--rabatt span:last-child { color: var(--sk-red); }
.sk-co-endsumme__zeile--gesamt {
	margin-top: .45rem;
	padding-top: .55rem;
	border-top: 1px solid rgba(23, 17, 12, .16);
	font-size: 1.08rem;
	font-weight: 700;
}
.sk-co-endsumme__steuer {
	margin: .25rem 0 0;
	font-size: .78rem;
	color: var(--sk-text-muted);
}

/* Mobil: rechte Spalte nach oben, damit man sofort sieht, was man kauft.
   Der Bestellbutton bleibt unten - mit eigener Summe direkt darueber. */
@media (max-width: 980px) {
	body.sk-checkout form.checkout { display: flex; flex-direction: column; }
	body.sk-checkout #order_review_heading,
	body.sk-checkout .sk-co-coupon,
	body.sk-checkout #order_review { order: -1; }
	body.sk-checkout #customer_details { order: 0; }
}

/* Mobil gehoert die Bestelluebersicht nach oben - der Kunde soll sofort
   sehen, was er kauft. Blocksy verpackt die Spalte in .ct-order-review,
   deshalb griff der Selektor auf form.checkout > #order_review nicht. */
@media (max-width: 980px) {
	body.sk-checkout form.checkout,
	body.sk-checkout .ct-checkout-wrap,
	body.sk-checkout .woocommerce > form.checkout { display: flex; flex-direction: column; }
	body.sk-checkout .ct-order-review,
	body.sk-checkout #order_review_heading,
	body.sk-checkout .sk-co-coupon,
	body.sk-checkout #order_review { order: -1; }
	body.sk-checkout #customer_details,
	body.sk-checkout .ct-customer-details { order: 0; }
	/* Der Zahlungsblock haengt in der linken Spalte und muss unten bleiben. */
	body.sk-checkout .sk-co-zahlung,
	body.sk-checkout .sk-co-section--pay,
	body.sk-checkout .sk-co-section__hint { order: 1; }
}

/* ==== Kassen-Nachbesserungen 2026-08-09, zweite Runde ==================== */

/* 1 - Adresszusatz: Beschriftung war unsichtbar, das Feld wirkte leer.
   Jetzt gleiche schwebende Beschriftung wie alle anderen Felder. */
body.sk-checkout #billing_address_2_field > label,
body.sk-checkout #shipping_address_2_field > label {
	position: absolute !important;
	width: auto !important; height: auto !important;
	margin: 0 !important; padding: 0 !important;
	overflow: visible !important; clip: auto !important; clip-path: none !important;
	left: 1rem; top: 1.28rem;
	pointer-events: none;
	color: var(--sk-text-muted);
	transition: top .15s ease, transform .15s ease;
}
body.sk-checkout #billing_address_2_field:focus-within > label,
body.sk-checkout #billing_address_2_field:has(input:not(:placeholder-shown)) > label,
body.sk-checkout #shipping_address_2_field:focus-within > label,
body.sk-checkout #shipping_address_2_field:has(input:not(:placeholder-shown)) > label {
	top: .45rem; transform: scale(.82); transform-origin: left top;
}

/* 3 - Produktbild stand ueber dem Text statt daneben. */
.woocommerce-checkout-review-order-table td.product-name {
	position: relative;
}
.woocommerce-checkout-review-order-table .wc-gzd-cart-item-thumbnail {
	position: absolute; left: 0; top: .1rem;
	width: 56px; height: 56px; line-height: 0;
}
.woocommerce-checkout-review-order-table .wc-gzd-cart-item-thumbnail img {
	width: 56px; height: 56px; object-fit: cover; border-radius: 8px; display: block;
}
.woocommerce-checkout-review-order-table td.product-name > .sk-co-name,
.woocommerce-checkout-review-order-table td.product-name .wc-gzd-cart-info.units-info,
.woocommerce-checkout-review-order-table td.product-name .sk-co-merkmale {
	display: block; padding-left: 4.4rem;
}

/* 4 - Kartensymbole in eigene Zeile, PayPal-Zeile als eine Einheit. */
body.sk-checkout li.payment_method_ppcp-credit-card-gateway > label {
	display: block;
}
body.sk-checkout li.payment_method_ppcp-credit-card-gateway > label img,
body.sk-checkout li.payment_method_ppcp-credit-card-gateway .ppcp-card-icons {
	display: inline-block; vertical-align: middle;
}
body.sk-checkout li.payment_method_ppcp-credit-card-gateway > label > img:first-of-type {
	margin-left: 0;
}
/* Symbolreihe beginnt unter der Beschriftung statt daneben. */
body.sk-checkout li.payment_method_ppcp-credit-card-gateway > label::after {
	content: ""; display: block; width: 100%; height: 0;
}
body.sk-checkout li.payment_method_ppcp-credit-card-gateway > label img {
	margin: .45rem .35rem 0 0; height: 26px; width: auto;
}
/* Die Beschreibung "Mit PayPal zahlen" gehoert zur PayPal-Zeile, nicht
   darunter wie eine eigene Zahlart. */
body.sk-checkout li.payment_method_ppcp-gateway .payment_box {
	margin: 0; padding: .1rem 0 .5rem 2.1rem;
	background: transparent; border: 0; font-size: .86rem;
	color: var(--sk-text-muted);
}
body.sk-checkout li.payment_method_ppcp-gateway .payment_box::before { display: none; }
body.sk-checkout li.payment_method_ppcp-gateway > label { display: flex; align-items: center; gap: .5rem; }

/* 5 - Statt der doppelten Aufstellung nur noch eine Zeile. */
p.sk-co-endsumme {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
	margin: 1rem 0 .8rem; padding: .75rem .95rem;
	border: 1px solid rgba(23, 17, 12, .14); border-radius: 12px; background: #fff;
}
.sk-co-endsumme__label { font-weight: 700; }
.sk-co-endsumme__wert  { font-weight: 700; font-size: 1.1rem; margin-left: auto; }
.sk-co-endsumme__zusatz {
	flex: 1 0 100%; font-size: .78rem; color: var(--sk-text-muted);
}

/* 6 - Der PayPal-Knopf sitzt jetzt in der Bestellzeile. */
#sk-co-zahlung .place-order .ppc-button-wrapper { margin: .6rem 0 0; }
#sk-co-zahlung .place-order .ppc-button-wrapper::before {
	content: "Mit PayPal bezahlen und Bestellung abschließen";
	display: block; margin-bottom: .45rem;
	font-size: .82rem; color: var(--sk-text-muted); text-align: center;
}

/* ==== Zahlungsbox nach Shopify-Vorbild ================================== */
body.sk-checkout #payment ul.payment_methods {
	border: 1px solid rgba(23, 17, 12, .18);
	border-radius: 12px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	background: #fff;
}
body.sk-checkout #payment ul.payment_methods > li.wc_payment_method {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(23, 17, 12, .12);
	list-style: none;
}
body.sk-checkout #payment ul.payment_methods > li.wc_payment_method:last-child { border-bottom: 0; }

/* Zeile: Auswahlfeld links, Bezeichnung daneben, Symbole rechts */
body.sk-checkout #payment ul.payment_methods > li > label {
	display: flex !important;
	align-items: center;
	gap: .65rem;
	margin: 0;
	padding: .95rem 1rem;
	font-weight: 600;
	cursor: pointer;
}
body.sk-checkout #payment ul.payment_methods > li > label img {
	height: 24px; width: auto; margin: 0 0 0 .3rem;
	border-radius: 3px;
}
/* Alles ab dem ersten Bild nach rechts schieben */
body.sk-checkout #payment ul.payment_methods > li > label img:first-of-type { margin-left: auto; }

/* Ausgewaehlte Zeile hervorheben */
body.sk-checkout #payment ul.payment_methods > li:has(input:checked) > label {
	background: rgba(47, 122, 52, .07);
	box-shadow: inset 0 0 0 2px #2f7a34;
	border-radius: 0;
}
body.sk-checkout #payment ul.payment_methods > li:first-child:has(input:checked) > label { border-radius: 11px 11px 0 0; }
body.sk-checkout #payment ul.payment_methods > li:last-child:has(input:checked) > label  { border-radius: 0 0 11px 11px; }
body.sk-checkout #payment ul.payment_methods input[type="radio"] { accent-color: #2f7a34; flex: 0 0 auto; }

/* Erklaerung unter der ausgewaehlten Zeile, ruhiger Grauton */
body.sk-checkout #payment ul.payment_methods .payment_box {
	margin: 0;
	padding: .85rem 1rem .95rem 2.6rem;
	background: #f6f5f3;
	border: 0;
	border-radius: 0;
	font-size: .88rem;
	color: var(--sk-text-muted);
}
body.sk-checkout #payment ul.payment_methods .payment_box::before { display: none; }
body.sk-checkout #payment ul.payment_methods .payment_box p:last-child { margin-bottom: 0; }

/* Kartenfelder innerhalb der Erklaerung */
body.sk-checkout #payment .payment_box .form-row { margin-bottom: .65rem; }


/* ==== Express-Kauf oben, wie bei Shopify ================================= */
.sk-co-express {
	max-width: 640px;
	margin: 0 auto .2rem;
	text-align: center;
}
.sk-co-express__title {
	margin: 0 0 .6rem;
	font-size: .85rem;
	font-weight: 500;
	color: var(--sk-text-muted);
}
.sk-co-express__slot {
	display: flex;
	justify-content: center;
	gap: .6rem;
	flex-wrap: wrap;
}
.sk-co-express__slot .ppc-button-wrapper { margin: 0; min-width: 220px; }
.sk-co-express__slot .ppc-button-wrapper::before { content: none; }
/* Der Trenner darunter */
.sk-co-or {
	max-width: 640px;
	margin: 1.1rem auto 1.6rem;
	display: flex; align-items: center; gap: 1rem;
	color: var(--sk-text-muted); font-size: .82rem;
}
.sk-co-or::before, .sk-co-or::after {
	content: ""; flex: 1; height: 1px; background: rgba(23, 17, 12, .16);
}

/* ==== Warenkorb: Express-Kauf nach Shopify-Vorbild ======================
   Der Express-Weg laeuft ueber den Warenkorb, weil das PayPal-Plugin an der
   klassischen Kasse nur einen Render-Punkt kennt. Hier bekommt er die
   Gestaltung, die vorher an der Kasse geplant war: Primaerknopf oben,
   Trenner, darunter der Direktweg. */
.wc-proceed-to-checkout {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.wc-proceed-to-checkout a.checkout-button {
	order: 0;
	min-height: 52px;
	display: grid;
	place-items: center;
}
/* Trenner zwischen beiden Wegen */
.wc-proceed-to-checkout .ppc-button-wrapper {
	order: 2;
	margin: 0;
	min-height: 52px;
}
.wc-proceed-to-checkout .ppc-button-wrapper::before {
	content: "oder";
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 1rem 0 .9rem;
	font-size: .82rem;
	color: var(--sk-text-muted);
	text-transform: none;
	letter-spacing: 0;
}
.wc-proceed-to-checkout .ppc-button-wrapper::after { content: none; }

/* Die Linien links und rechts vom Wort "oder" */
.wc-proceed-to-checkout .ppc-button-wrapper {
	position: relative;
}
.wc-proceed-to-checkout .ppc-button-wrapper::before {
	background:
		linear-gradient(rgba(23, 17, 12, .16), rgba(23, 17, 12, .16)) left center / calc(50% - 2.2rem) 1px no-repeat,
		linear-gradient(rgba(23, 17, 12, .16), rgba(23, 17, 12, .16)) right center / calc(50% - 2.2rem) 1px no-repeat;
	justify-content: center;
}

/* PayPals iframe fuellt die Breite und bekommt dieselbe Silhouette. */
.wc-proceed-to-checkout .ppc-button-wrapper > div,
.wc-proceed-to-checkout .ppc-button-wrapper iframe { width: 100% !important; }




/* ==== Warenkorb: Trenner als echtes Element, Erklaerung vor dem Knopf ====
   Der Trenner "oder" bleibt optisch unveraendert (Kundenwunsch), wandert
   aber aus dem Pseudoelement in ein eigenes Element. Dadurch ist Platz fuer
   den Erklaerungssatz direkt ueber dem PayPal-Knopf. */
.sk-korb-oder {
	order: 1;
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 1rem 0 .9rem;
	font-size: .82rem;
	color: var(--sk-text-muted);
}
.sk-korb-oder::before,
.sk-korb-oder::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(23, 17, 12, .16);
}

/* Der Hinweis gehoert an den PayPal-Knopf, NICHT an den Container.
   Gemessen am 15.09.2026: .ppc-button-wrapper enthaelt drei Knoepfe -
   PayPal, Apple Pay und Google Pay. Der Satz stand dadurch ueber allen
   dreien, obwohl er nur den PayPal-Knopf beschreibt; Google Pay stand
   darunter und wirkte deplatziert. */
/* Anordnung im Express-Block - Vorgabe der Inhaberin vom 15.09.2026 anhand
   ihres Bildschirmfotos vom Vortag:
       Weiter zur Kasse
       Apple Pay
       Google Pay
       "oder"
       Hinweis + PayPal
   PayPals Plugin haengt beide Wallets in denselben Container wie den
   PayPal-Knopf. Damit sie sich unabhaengig einsortieren lassen, wird der
   Container per display:contents aufgeloest - seine Kinder ordnen sich dann
   direkt im Block ein. Das Element bleibt im Baum, Geschwisterwahl greift
   also weiterhin. */
.wc-proceed-to-checkout {
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
.wc-proceed-to-checkout .ppc-button-wrapper { display: contents; }
.wc-proceed-to-checkout .checkout-button            { order: 1; }
.wc-proceed-to-checkout .sk-minqty-block            { order: 1; }
/* Stripes Express-Bereich traegt Apple Pay und Google Pay (verifiziert am
   15.09.2026: #wc-stripe-express-checkout-element-applePay rendert auch in
   Chrome unter Windows - Apples QR-Weg). Er gehoert direkt unter "Weiter
   zur Kasse", oberhalb des "oder" und des PayPal-Knopfes. */
.wc-proceed-to-checkout #wc-stripe-express-checkout-element { order: 2; }
.wc-proceed-to-checkout #ppc-button-applepay-container  { order: 2; }
.wc-proceed-to-checkout #ppc-button-googlepay-container { order: 3; }
.wc-proceed-to-checkout .sk-korb-oder               { order: 4; }
.wc-proceed-to-checkout #ppc-button-ppcp-gateway    { order: 5; }

/* Unterhalb der Mindestmenge muessen die Wallets ebenfalls gesperrt sein.
   Durch display:contents hat der Container keine eigene Flaeche mehr - eine
   Sperre an IHM wuerde die Kinder nicht erreichen. Deshalb direkt an den
   Knoepfen. */
.sk-minqty-block ~ .ppc-button-wrapper > [id^="ppc-button"] {
	pointer-events: none;
	opacity: .4;
	filter: grayscale(100%);
	cursor: not-allowed;
	user-select: none;
}

/* Das Pseudoelement des Containers trug frueher denselben Hinweis. Jetzt,
   wo der Hinweis am PayPal-Knopf haengt, kam dort das alte "oder" wieder
   zum Vorschein - direkt unter dem echten Trenner .sk-korb-oder. */
.wc-proceed-to-checkout .ppc-button-wrapper::before { content: none; }

.wc-proceed-to-checkout #ppc-button-ppcp-gateway::before {
	content: "Beim Klick auf diesen Knopf wirst du zu PayPal weitergeleitet, um deinen Kauf abzuschließen.";
	display: block;
	margin: 0 0 .6rem;
	padding: 0;
	background: none;
	font-size: .8rem;
	line-height: 1.45;
	color: var(--sk-text-muted);
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
}


/* ==== Express-Kauf oben auf der Kassenseite ============================== */
.sk-co-express { max-width: 560px; margin: 0 auto; text-align: center; }
.sk-co-express__title { margin: 0 0 .3rem; font-size: .95rem; font-weight: 700; }
.sk-co-express__hint {
	margin: 0 0 .7rem; font-size: .8rem; line-height: 1.45;
	color: var(--sk-text-muted);
}
.sk-co-express__slot .ppc-button-wrapper { margin: 0; }
.sk-korb-oder--kasse { max-width: 560px; margin: 1.1rem auto 1.6rem; }

/* Kasse: der Abstand ueber dem Express-Bereich war zu gross. */
body.sk-checkout .ct-container,
body.sk-checkout main#main,
body.sk-checkout .site-main { padding-top: 0; }
body.sk-checkout .sk-co-express { margin-top: 0; padding-top: 0; }

/* Die 98 px kamen aus zwei Quellen: 60 px vom Blocksy-Container und
   38,4 px vom WooCommerce-Wrapper. Beides gemessen, beides hier weg. */
body.sk-checkout .ct-container-full { padding-top: 0 !important; }
body.sk-checkout .woocommerce { padding-top: 1rem; }

/* Der Datenschutztext klebte direkt unter dem Zahlungskasten. */
body.sk-checkout .woocommerce-privacy-policy-text {
	margin-top: 1.2rem;
	font-size: .86rem;
	line-height: 1.55;
	color: var(--sk-text-muted);
}
body.sk-checkout .woocommerce-privacy-policy-text p:last-child { margin-bottom: 0; }
/* Und die AGB-Zeile braucht ebenfalls Luft nach oben und unten. */
body.sk-checkout .woocommerce-terms-and-conditions-wrapper { margin-top: 1rem; }
body.sk-checkout .form-row.place-order { margin-top: 1.2rem; }

/* Datenschutztext und AGB-Zeile brauchen mehr Luft voneinander. */
body.sk-checkout .woocommerce-privacy-policy-text { margin-bottom: 1.2rem; }
body.sk-checkout .woocommerce-terms-and-conditions-wrapper { margin-top: 1.4rem; }
body.sk-checkout .form-row.place-order { margin-top: 1.6rem; }
/* Der Zusatz zum fehlenden Widerrufsrecht steht kleiner darunter. */
.sk-co-agb-hinweis {
	display: block;
	margin-top: .35rem;
	font-size: .8rem;
	line-height: 1.45;
	color: var(--sk-text-muted);
}

/* Der vom Plugin nachgestellte Pflichtstern steht jetzt im Satz - der
   freistehende darunter entfaellt. */
body.sk-checkout .woocommerce-terms-and-conditions-wrapper label > abbr.required:not(.sk-co-stern) {
	display: none;
}
.sk-co-stern {
	color: var(--sk-red);
	text-decoration: none;
	border: 0;
	margin-left: .15em;
}

/* Express-Bereich einklappen, wenn PayPal seinen Knopf abgebaut hat -
   sonst steht oben eine leere Flaeche mit Ueberschrift und "oder". */
#sk-co-express.sk-co-express--leer,
body.sk-co-express-aus #sk-co-express,
body.sk-co-express-aus .sk-korb-oder--kasse {
	display: none;
}

/* Offizielle Zahlungs- und Versandlogos: einheitliche Hoehe, Seitenverhaeltnis
   bleibt erhalten - die Marken duerfen nicht verzerrt werden. */
.sk-badge-img img {
	display: block;
	height: 26px;
	width: auto;
	max-width: 100%;
}
.sk-badge-img--dhl img,
.sk-badge-img img[src$="dhl.png"] {
	height: 20px;
	background: #fecc00;
	padding: 3px 6px;
	border-radius: 4px;
}

/* Der PayPal-Schriftzug ist deutlich breiter als die Kartenlogos. Etwas
   kleiner skaliert passt die Leiste in eine Zeile - Seitenverhaeltnis bleibt. */
.sk-badge-img img[src*="paypal"] {
	height: 18px;
}

/* Keine eigene Kachel mehr hinter den Logos - jede Marke bringt ihre
   offizielle Flaeche selbst mit (Visa und Mastercard als Dunkelvariante,
   Amex blau, DHL gelb). Nur PayPal liefert keine helle Fassung, und eine
   Marke umzufaerben ist nicht zulaessig - dort bleibt Weiss stehen. */
.sk-badge-img {
	background: none;
	border: 0;
	padding: 0;
	box-shadow: none;
}
.sk-badge-img img[src*="paypal"] {
	height: 16px;
	background: #fff;
	padding: 4px 7px;
	border-radius: 4px;
}

/* Die dunkle Kachel kommt aus einer spezifischeren Regel weiter oben -
   deshalb hier gezielt im Fussbereich abraeumen. */
.sk-footer__pay .sk-badge-img {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
/* PayPal groesser: Schriftzug 22 px, mit dem weissen Rand zusammen so hoch
   wie die Kartenlogos. */
.sk-footer__pay .sk-badge-img img[src*="paypal"] {
	height: 22px;
	padding: 2px 6px;
	background: #fff;
	border-radius: 4px;
}

/* Klarna liegt quadratisch vor (32x32) - auf Kartenhoehe bringen. */
.sk-footer__pay .sk-badge-img img[src*="klarna"] {
	height: 26px;
}

/* Apple Pay und Google Pay auf dieselbe mittige Spalte wie der
   PayPal-Express bringen - samt Trenner und Erklaerungssatz. */
#wc-stripe-express-checkout-element,
#wc-stripe-express-checkout-button-separator,

/* ---------- Aktionsseite: Geschenk-Erinnerung per WhatsApp ----------
   Zweiter Schritt nach den Geschenk-Karten. Bewusst leiser als die Karten:
   heller Panel-Ton, flacher Schatten, kein Hover-Anheben, kein Feuer-Verlauf. */
.sk-gift-wa {
	position: relative;
	margin: 2.4rem auto 0;
	max-width: 34rem;
	padding: clamp(1.6rem, 1.2rem + 2vw, 2.1rem) clamp(1.25rem, .9rem + 1.8vw, 1.9rem) clamp(1.4rem, 1.1rem + 1.5vw, 1.7rem);
	text-align: center;
	background: #f4fbf7;
	border: 1px solid #cfe8dd;
	border-radius: 16px;
	box-shadow: 0 10px 24px -18px rgba(23, 17, 12, .35);
}
/* Dekorative Kopfkante in WhatsApp-Gruen, fuehrt das Auge auf den Titel. */
.sk-gift-wa::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto -1px;
	height: 4px;
	background: linear-gradient(90deg, #0b5b52 0%, #128c7e 55%, #25d366 100%);
	border-radius: 16px 16px 0 0;
	pointer-events: none;
}
/* Titel als erstes Blickziel: Versalien, hoechster Kontrast - aber neutral
   schwarzbraun statt rot, damit die Feuer-Karten darueber fuehrend bleiben. */
.sk-gift-wa__title {
	margin: 0 0 .55rem;
	font-family: var(--sk-font-head);
	font-size: clamp(1.35rem, 1.2rem + .7vw, 1.5rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #17110c;
	text-wrap: balance;
}
.sk-gift-wa__title::after {
	content: "";
	display: block;
	width: 2.75rem;
	height: 3px;
	margin: .6rem auto 0;
	background: #118275;
	border-radius: 999px;
}
.sk-gift-wa__text {
	margin: 0 auto 1.15rem;
	max-width: 30rem;
	font-size: .95rem;
	line-height: 1.55;
	color: #2a2018;
	text-wrap: pretty;
}
/* Knopf: WhatsApp-Gruen, aber 7 % dunkler. #128c7e erreicht mit Weiss nur
   4,14:1 und faellt damit unter die AA-Schwelle von 4,5:1. Farbton und
   Saettigung bleiben unveraendert, die Marke bleibt erkennbar. */
.sk-gift-wa__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	width: 100%;
	max-width: 24rem;
	min-height: 52px;
	padding: .85rem 1.3rem;
	background: #118275;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 12px;
	box-shadow: 0 6px 14px -10px rgba(11, 91, 82, .8);
	transition: background-color .15s ease;
}
.sk-gift-wa .sk-gift-wa__btn,
.sk-gift-wa .sk-gift-wa__btn:link,
.sk-gift-wa .sk-gift-wa__btn:visited,
.sk-gift-wa .sk-gift-wa__btn:hover,
.sk-gift-wa .sk-gift-wa__btn:focus,
.sk-gift-wa .sk-gift-wa__btn:active {
	color: #fff;
}
.sk-gift-wa__btn:hover,
.sk-gift-wa__btn:active {
	background-color: #0b5b52;
}
.sk-gift-wa__btn:focus-visible {
	outline: 3px solid #17110c;
	outline-offset: 3px;
	background-color: #0b5b52;
}
img.sk-gift-wa__icon {
	display: block;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}
.sk-gift-wa__note {
	margin: .9rem auto 0;
	max-width: 30rem;
	font-size: .85rem;
	line-height: 1.5;
	color: #4a5a52;
}
@media (min-width: 481px) {
	.sk-gift-wa__btn {
		width: auto;
		padding-inline: 1.6rem;
	}
}
/* Dunkelmodus-Block entfernt: Der Shop bleibt immer hell, die Box
   erschien sonst dunkel in heller Umgebung. */

/* Keine Bewegungsanimation vorhanden; bei reduzierter Bewegung entfaellt
   zusaetzlich der Farbuebergang. */
@media (prefers-reduced-motion: reduce) {
	.sk-gift-wa__btn { transition: none; }
}

/* Das Geschenk-Zeichen ist reine Zier - es steht in der Grundschrift, damit
   die Schmalschrift der Ueberschrift es nicht verzerrt. */
.sk-gift-wa__emoji {
	font-family: initial;
	font-size: .95em;
	line-height: 1;
	letter-spacing: 0;
}

/* Zweiter Knopf im Kopfbereich von /aktion/: springt zur WhatsApp-Erinnerung.
   Gruen statt Feuer, damit er sich vom Hauptknopf unterscheidet, aber gleich
   gross bleibt. Weiss auf #118275 ergibt 4,69:1 und erfuellt damit AA. */
.wp-block-button.sk-btn-wa .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	background: #118275;
	color: #fff;
	border: 0;
	box-shadow: 0 6px 16px -10px rgba(11, 91, 82, .9);
}
.wp-block-button.sk-btn-wa .wp-block-button__link:hover,
.wp-block-button.sk-btn-wa .wp-block-button__link:focus-visible,
.wp-block-button.sk-btn-wa .wp-block-button__link:active,
.wp-block-button.sk-btn-wa .wp-block-button__link:visited {
	background: #0b5b52;
	color: #fff;
}
.wp-block-button.sk-btn-wa .wp-block-button__link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}
/* Offizielles WhatsApp-Zeichen in Weiss, unveraendert als Bilddatei. */
.wp-block-button.sk-btn-wa .wp-block-button__link::before {
	content: "";
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	background: url("../img/pay/whatsapp.png") center / contain no-repeat;
}
/* Damit die Kopfleiste das Sprungziel nicht verdeckt. */
#geschenk-erinnerung {
	scroll-margin-top: 6rem;
}

/* Das Zeichen steht als echtes Bild im Knopf. Ueber ::before ging es nicht:
   Blocksy belegt das Pseudo-Element an Block-Buttons bereits selbst. */
.wp-block-button.sk-btn-wa .wp-block-button__link::before {
	content: none;
}
img.sk-hero-wa__icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: .55rem;
	vertical-align: -.22em;
}

/* Quellenangabe unter der Naehrwerttabelle: abgesetzt, kleiner, zurueckhaltend.
   Grau #6b675f auf Creme #faf7f2 ergibt 5,6:1 und erfuellt damit AA. */
.sk-naehrwerte__quelle {
	margin: 1.1rem 0 0;
	font-size: .82rem;
	line-height: 1.5;
	color: #6b675f;
}

/* Aktionsleiste: rund 10 % groesser. Hintergrund bleibt das Feuer-Orange
   der Marke - das Gruen war nur ein Versuch und ist zurueckgenommen. */
.sk-promo {
	font-size: .88rem;
	padding: .34rem 1.2rem;
	gap: .45rem .8rem;
}
.sk-promo:hover { filter: brightness(1.08); }
.sk-promo__flag {
	font-size: .73rem;
	padding: .14rem .66rem;
	background: rgba(0, 0, 0, .28);
}
.sk-promo__cta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .75rem;
	padding: .22rem .8rem;
	/* WhatsApp-Gruen statt Weiss: Der Knopf fuehrt zur Geschenk-Aktion mit
	   WhatsApp-Erinnerung. Weiss auf #128c7e ergibt 4,7:1 und erfuellt AA;
	   auf dem hellen #25D366 waeren es nur rund 2:1. */
	background: #128c7e;
	color: #fff !important;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}
.sk-promo:hover .sk-promo__cta {
	background: #0b5b52;
}
img.sk-promo__icon {
	display: block;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	/* Das Zeichen liegt weiss vor und steht jetzt auf gruenem Grund -
	   keine Umfaerbung noetig. */
}
@media (max-width: 720px) {
	.sk-promo { font-size: .81rem; padding: .3rem .8rem; gap: .34rem .55rem; }
}

/* Der WhatsApp-Knopf im Kopf von /aktion/ soll einzeilig bleiben. Die
   Schrift skaliert mit der Fensterbreite, statt umzubrechen - zweizeilig
   wirkt der Knopf gedrungen und die Zeilen stehen zu eng. */
.wp-block-button.sk-btn-wa .wp-block-button__link {
	white-space: nowrap;
	font-size: clamp(.7rem, 3.1vw, .95rem);
	letter-spacing: .01em;
	padding-inline: clamp(.8rem, 3vw, 1.6rem);
}
@media (max-width: 400px) {
	.wp-block-button.sk-btn-wa .wp-block-button__link {
		gap: .4rem;
	}
	img.sk-hero-wa__icon {
		width: 17px;
		height: 17px;
		margin-right: .4rem;
	}
}



/* Beide Knoepfe im Kopf von /aktion/ mit gleicher Schriftgroesse. Der
   WhatsApp-Knopf hatte eine mitskalierende Groesse, damit er einzeilig
   bleibt - da genug Platz ist, bekommen beide denselben festen Wert. */
@media (max-width: 720px) {
	.wp-block-button.sk-btn-wa .wp-block-button__link,
	.wp-block-button.sk-btn-scroll .wp-block-button__link {
		font-size: .82rem;
		letter-spacing: .02em;
	}
}

/* Bestelluebersicht an der Kasse, schmale Bildschirme.
   Zwei fruehere Versuche sind gescheitert: hyphens:auto trennte mitten im
   Wort, width:1% mit nowrap machte die Tabelle breiter als den Bildschirm.
   Jetzt schlicht: Tabelle bleibt im Rahmen, Umbrueche nur an Wortgrenzen,
   der MwSt-Zusatz steht unter dem Betrag. */
@media (max-width: 720px) {
	body.sk-checkout .woocommerce-checkout-review-order-table {
		table-layout: auto;
		width: 100%;
		max-width: 100%;
	}
	body.sk-checkout .woocommerce-checkout-review-order-table th,
	body.sk-checkout .woocommerce-checkout-review-order-table td {
		hyphens: manual;
		word-break: normal;
		overflow-wrap: break-word;
		padding-left: .2rem;
		padding-right: .2rem;
	}
	body.sk-checkout .woocommerce-checkout-review-order-table thead th {
		font-size: .6rem;
		letter-spacing: .02em;
	}
	body.sk-checkout .woocommerce-checkout-review-order-table th:last-child,
	body.sk-checkout .woocommerce-checkout-review-order-table td:last-child {
		text-align: right;
		padding-right: 0;
	}
	body.sk-checkout .woocommerce-checkout-review-order-table th:first-child,
	body.sk-checkout .woocommerce-checkout-review-order-table td:first-child {
		padding-left: 0;
	}
	body.sk-checkout .woocommerce-checkout-review-order-table .product-name img {
		width: 38px !important;
		height: auto;
		margin-right: .5rem;
	}
	body.sk-checkout .woocommerce-checkout-review-order-table .product-name .variation,
	body.sk-checkout .woocommerce-checkout-review-order-table .product-name small,
	body.sk-checkout .woocommerce-checkout-review-order-table .product-name p {
		font-size: .74rem;
		line-height: 1.4;
	}
	body.sk-checkout .order-total .includes_tax,
	body.sk-checkout .order-total small {
		display: block;
		margin-top: .15rem;
		font-size: .68rem;
		line-height: 1.35;
		white-space: normal;
		text-align: right;
	}
}

/* Kasse mobil: Die Bestelltabelle war nur 216 px breit, weil #order_review
   und der Rahmen darum zusammen rund 100 px Innenabstand verbrauchen.
   Dadurch musste der Produktname umbrechen. Auf schmalen Bildschirmen
   deshalb die Polsterung reduzieren. */
@media (max-width: 720px) {
	body.sk-checkout .ct-order-review,
	body.sk-checkout #order_review {
		padding-left: .7rem;
		padding-right: .7rem;
	}
}

/* Letzter Feinschliff Kasse mobil.
   1. Der Produktname wurde weiterhin mitten im Wort getrennt ("Schweinenacke n"),
      weil overflow-wrap:break-word auch dort galt. Fuer den Namen jetzt aus -
      Platz ist genug, seit die Polsterung reduziert ist.
   2. Der MwSt-Zusatz ragte ueber den rechten Rand; er bekommt eigene
      Umbruchregeln und etwas Luft. */
@media (max-width: 720px) {
	body.sk-checkout .woocommerce-checkout-review-order-table .product-name,
	body.sk-checkout .woocommerce-checkout-review-order-table .product-name a,
	body.sk-checkout .woocommerce-checkout-review-order-table .product-name strong {
		overflow-wrap: normal;
		word-break: keep-all;
	}
	body.sk-checkout .woocommerce-checkout-review-order-table tfoot .includes_tax,
	body.sk-checkout .woocommerce-checkout-review-order-table tfoot small,
	body.sk-checkout .order-total .includes_tax,
	body.sk-checkout .order-total small {
		display: block;
		max-width: 100%;
		margin-top: .2rem;
		padding-left: 0;
		font-size: .66rem;
		line-height: 1.35;
		white-space: normal;
		overflow-wrap: break-word;
		text-align: right;
	}
	body.sk-checkout .woocommerce-checkout-review-order-table tfoot td {
		padding-right: 0;
	}
}

/* "Schweinenacken" braucht in der schmalen Spalte etwa 130 px. Bei der
   bisherigen Schriftgroesse passte es nicht und das Theme trennte per
   break-all mitten im Wort. Kleinere Schrift plus !important, weil die
   Theme-Regel spezifischer ist als meine. */
@media (max-width: 720px) {
	body.sk-checkout .woocommerce-checkout-review-order-table .product-name,
	body.sk-checkout .woocommerce-checkout-review-order-table .product-name * {
		font-size: .82rem;
		line-height: 1.35;
		word-break: normal !important;
		overflow-wrap: normal !important;
		hyphens: manual !important;
	}
	body.sk-checkout .woocommerce-checkout-review-order-table .product-name .variation,
	body.sk-checkout .woocommerce-checkout-review-order-table .product-name small,
	body.sk-checkout .woocommerce-checkout-review-order-table .product-name p {
		font-size: .72rem;
	}
}

/* Kompakter WhatsApp-Knopf auf Produktseite, im Warenkorb und an der Kasse.
   Einzeilig auch auf schmalen Bildschirmen: Die Schrift skaliert mit,
   umbrechen soll er nicht. Weiss auf #128c7e ergibt 4,7:1 und erfuellt AA. */
.sk-wa-leiste {
	margin: 1rem 0 1.2rem;
}
.sk-wa-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	max-width: 100%;
	min-height: 46px;
	padding: .7rem 1.2rem;
	background: #128c7e;
	color: #fff !important;
	font-family: var(--sk-font-head);
	font-size: clamp(.74rem, 3.1vw, .9rem);
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 10px;
	box-shadow: 0 6px 14px -10px rgba(11, 91, 82, .8);
	transition: background-color .15s ease;
}
.sk-wa-knopf:hover,
.sk-wa-knopf:focus-visible,
.sk-wa-knopf:visited,
.sk-wa-knopf:active {
	background: #0b5b52;
	color: #fff !important;
}
.sk-wa-knopf:focus-visible {
	outline: 3px solid #17110c;
	outline-offset: 3px;
}
img.sk-wa-knopf__icon {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}
@media (max-width: 600px) {
	.sk-wa-leiste { margin: .8rem 0 1rem; }
	.sk-wa-knopf { width: 100%; padding-inline: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
	.sk-wa-knopf { transition: none; }
}

/* Kurze Erklaerung ueber dem WhatsApp-Knopf: klein, grau, zurueckhaltend.
   Grau #6b675f auf Creme ergibt 5,6:1 und erfuellt damit AA. */
.sk-wa-leiste__hinweis {
	margin: 0 0 .5rem;
	max-width: 34rem;
	font-size: .8rem;
	line-height: 1.45;
	font-weight: 400;
	color: #6b675f;
}

/* Hinweis und Knopf mittig - so stehen sie als Einheit statt linksbündig
   neben dem Formular. */
.sk-wa-leiste {
	text-align: center;
}
.sk-wa-leiste__hinweis {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Hinweiszeile etwas groesser und einzeilig. Die Schrift skaliert mit der
   Fensterbreite, damit der Satz auch auf 360 px nicht umbricht. */
.sk-wa-leiste__hinweis {
	max-width: none;
	white-space: nowrap;
	font-size: clamp(.66rem, 2.55vw, .95rem);
}

/* Mobiles Menue: Konto und Warenkorb sahen dort anders aus als die uebrigen
   Punkte - Symbol ueber der Beschriftung, Zahl als breiter Balken, und der
   Text fuer Screenreader war sichtbar ("WARENKORBWarenkorb, 4 Artikel").
   Im Ausklappmenue jetzt dieselbe Zeilenform wie bei allen anderen. */
#offcanvas .sk-navicon {
	display: flex;
	align-items: center;
	gap: .7rem;
	min-height: 44px;
	padding: .5rem 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3;
}
#offcanvas .sk-navicon__svg {
	width: 21px;
	height: 21px;
	flex: 0 0 auto;
	order: -1;
}
#offcanvas .sk-navicon__label {
	font-size: 1rem;
	text-transform: none;
	letter-spacing: 0;
}
/* Der Screenreader-Text gehoert nicht ins Bild. */
#offcanvas .sk-navicon .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
/* Die Anzahl als runde Marke statt als Balken ueber die ganze Breite. */
#offcanvas .sk-navicon__count {
	flex: 0 0 auto;
	order: 9;
	min-width: 22px;
	width: auto;
	height: 22px;
	margin-left: auto;
	padding: 0 .4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-size: .74rem;
	line-height: 1;
}
#offcanvas .sk-navicon__count:not(.is-filled) {
	display: none;
}

/* Kartenueberschriften einzeilig. Seit dem Zusatz "OPTION A:" bzw.
   "OPTION B:" brach die laengere Zeile um; die Schrift skaliert jetzt mit
   der Fensterbreite, statt zu springen. */
.sk-gift-card__title {
	white-space: nowrap;
	font-size: clamp(.82rem, 3.2vw, 1.32rem);
	line-height: 1.2;
}
.sk-gift-card__title sup {
	font-size: .55em;
}

/* Die vorige Regel wurde von einer spezifischeren ueberstimmt (gemessen
   20,8 px statt der gesetzten Groesse). Deshalb hier mit voller Kette. */
.sk-gift-choice .sk-gift-choice__grid .sk-gift-card .sk-gift-card__title {
	white-space: nowrap !important;
	font-size: clamp(.8rem, 3.15vw, 1.32rem) !important;
	line-height: 1.2 !important;
}

/* Zwischen Tablet und kleinem Desktop stehen die Karten bereits nebeneinander,
   die Karte ist dort aber schmaler als am grossen Bildschirm. Die an der
   Fensterbreite haengende Schrift wurde deshalb zu gross und der Titel
   abgeschnitten - hier ein eigener, kleinerer Wert. */
@media (min-width: 601px) and (max-width: 1100px) {
	.sk-gift-choice .sk-gift-choice__grid .sk-gift-card .sk-gift-card__title {
		font-size: .86rem !important;
	}
}

/* Versandhinweis auf der Aktionsseite: DHL-Zeichen links, Text rechts.
   Gelber Rand statt gelber Flaeche - eine volle DHL-Gelbfläche waere zu laut
   neben den beiden Geschenkkarten und wuerde den Blick von ihnen wegziehen. */
.sk-versandbox {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	max-width: 46rem;
	margin: 1.6rem auto 0;
	padding: 1.1rem 1.3rem;
	background: #fffdf5;
	border: 1px solid #f0e2b6;
	border-left: 4px solid #fecc00;
	border-radius: 12px;
}
img.sk-versandbox__logo {
	flex: 0 0 auto;
	width: 52px;
	height: auto;
	margin-top: .15rem;
	background: #fecc00;
	padding: 4px 6px;
	border-radius: 5px;
}
.sk-versandbox__titel {
	margin: 0 0 .3rem;
	font-family: var(--sk-font-head);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
}
.sk-versandbox__text p:last-child {
	margin: 0;
	font-size: .9rem;
	line-height: 1.55;
	color: #3a332b;
}
@media (max-width: 560px) {
	.sk-versandbox {
		flex-direction: column;
		gap: .7rem;
		padding: 1rem;
	}
	.sk-versandbox__titel { font-size: .95rem; }
	.sk-versandbox__text p:last-child { font-size: .86rem; }
}

/* Countdown-Band oben auf der Aktionsseite. Bis das Skript den Cookie
   gelesen hat, bleibt es per hidden unsichtbar - sonst blitzt kurz "--:--:--"
   auf. */
.sk-bonus {
	background: var(--sk-fire, linear-gradient(90deg, #e2571f, #a41d0d));
	color: #fff;
}
.sk-bonus[hidden] { display: none; }
.sk-bonus__inner {
	max-width: 60rem;
	margin: 0 auto;
	padding: .6rem 1.2rem;
	text-align: center;
}
.sk-bonus p {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .3rem .6rem;
	margin: 0;
	font-size: clamp(.82rem, 2.6vw, 1rem);
	line-height: 1.35;
}
.sk-bonus__icon { font-size: 1.1em; }
.sk-bonus__text { font-weight: 600; }
.sk-bonus__uhr {
	display: inline-flex;
	align-items: center;
	gap: .15rem;
	font-family: var(--sk-font-head);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
}
.sk-bonus__zahl {
	background: rgba(0, 0, 0, .28);
	border-radius: 6px;
	padding: .1rem .4rem;
	min-width: 2.1em;
	text-align: center;
}
.sk-bonus__sep { opacity: .7; }
.sk-bonus__cta {
	background: #fff;
	color: var(--sk-red, #a41d0d) !important;
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
	padding: .22rem .8rem;
	white-space: nowrap;
}
.sk-bonus__cta:hover { background: #ffe9d9; }

/* Abstand zwischen den Fussnoten und dem naechsten Abschnitt war zu gross:
   Fussnoten-Aussenabstand und Abschnittspolsterung addierten sich. */
.sk-gift-fn {
	margin-bottom: 0;
	padding-bottom: 0;
}
.sk-gift-choice {
	padding-bottom: .5rem;
	margin-bottom: 0;
}

/* display:flex ueberstimmt das hidden-Attribut - ohne diese Zeile stehen
   der laufende und der abgelaufene Zustand gleichzeitig da. */
.sk-bonus p[hidden],
.sk-bonus [hidden] {
	display: none !important;
}

/* Das Band stand eingerueckt im Inhaltsbereich, mit ungleichen Abstaenden
   oben und unten. Jetzt ueber die volle Breite und buendig zwischen Kopfzeile
   und Hero - wie die Aktionsleiste auf der Startseite. */
.sk-bonus {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: 0;
}
.sk-bonus__inner {
	padding-top: .7rem;
	padding-bottom: .7rem;
}
/* Der Inhaltsbereich setzt oben einen Abstand, der das Band von der
   Kopfzeile abruecken wuerde. */
body.page-id-115 .entry-content > .sk-bonus:first-child {
	margin-top: 0;
}
body.page-id-115 .entry-content {
	padding-top: 0;
	margin-top: 0;
}

/* Mobil so gross wie moeglich, aber weiterhin einzeilig. 4,25vw ergeben bei
   360 px rund 15,3 px und bei 430 px rund 18,3 px - der laengere Titel
   ("OPTION B: 10 % auf deine Bestellung") passt damit noch in eine Zeile. */
@media (max-width: 600px) {
	.sk-gift-choice .sk-gift-choice__grid .sk-gift-card .sk-gift-card__title {
		font-size: 4.25vw !important;
	}
}

/* ---------- Widerrufsschaltflaeche und Widerrufsformular (Paragraph 356a BGB) ----------
   Absatz 1 verlangt "gut lesbar" und "hervorgehoben platziert". Deshalb hebt sich
   die Schaltflaeche im Footer bewusst von den uebrigen Rechtslinks ab: eigener
   Rahmen, eigener Abstand. Weiss auf Schwarz ergibt hier den vollen Kontrast. */
.sk-wr-link {
	display: inline-block;
	margin-top: 1.1rem;
	padding: .6rem 1.1rem;
	border: 2px solid #cfc9c1;
	border-radius: 8px;
	font-weight: 700;
	font-size: .92rem;
	line-height: 1.2;
}
.sk-footer .sk-wr-link,
.sk-footer .sk-wr-link:link,
.sk-footer .sk-wr-link:visited { color: #fff; }
.sk-footer .sk-wr-link:hover,
.sk-footer .sk-wr-link:focus {
	color: var(--sk-black);
	background: #fff;
	border-color: #fff;
}

/* Bestaetigungsseite: eine mittige Spalte statt voller Seitenbreite. Lange
   Zeilen sind auf dem Rechner sonst kaum lesbar, und ein Rechtsvorgang soll
   ruhig und geordnet wirken. */
.sk-wr-wrap {
	max-width: 40rem;
	margin-inline: auto;
	padding-bottom: 1rem;
}

/* Die Seitenueberschrift laeuft sonst ueber die volle Breite und steht damit
   287 px links neben der Formularkarte. Auf dieselbe Spalte gebracht, fluchten
   Titel und Karte an derselben Kante. */
body.sk-wr-seite .entry-header {
	max-width: 40rem;
	margin-inline: auto;
}

/* Das Formular als abgesetzte Karte. */
.sk-wr {
	background: #fff;
	border: 1px solid #e4ded4;
	border-radius: 14px;
	padding: 2rem 2rem 1.6rem;
	box-shadow: 0 10px 30px -22px rgba(0,0,0,.45);
}
.sk-wr__lead {
	margin: 0 0 1.6rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid #ece6dc;
	font-size: .97rem;
	line-height: 1.6;
	color: #6b675f;
}
.sk-wr__feld { display: flex; flex-direction: column; margin: 0 0 1.15rem; }
.sk-wr__feld label { font-weight: 700; margin-bottom: .4rem; }
.sk-wr__feld input,
.sk-wr__feld textarea {
	width: 100%;
	padding: .72rem .85rem;
	border: 1px solid #cdc6bb;
	border-radius: 8px;
	font: inherit;
	background: #fff;
	transition: border-color .15s ease;
}
.sk-wr__feld input:hover,
.sk-wr__feld textarea:hover { border-color: #a9a196; }
.sk-wr__feld input:focus,
.sk-wr__feld textarea:focus {
	border-color: var(--sk-ember);
	outline: 2px solid var(--sk-ember);
	outline-offset: 1px;
}
.sk-wr__feld textarea { resize: vertical; min-height: 5.5rem; }
/* Das Datum braucht keine volle Breite - es waere sonst optisch ein Fremdkoerper. */
.sk-wr__feld--kurz input { max-width: 13rem; }

/* Pflichtstern in der Hausfarbe, ohne Unterringelung durch <abbr>. */
.sk-wr__stern { color: var(--sk-ember); text-decoration: none; border: 0; font-weight: 700; }

/* Freiwilliges deutlich vom Pflichtteil trennen. */
.sk-wr__optional { margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px solid #ece6dc; }
.sk-wr__zwischen {
	margin: 0 0 1.1rem;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #6b675f;
}

/* Grau #6b675f auf Weiss ergibt 6,0:1 und erfuellt damit AA. */
.sk-wr__tipp { margin-top: .35rem; font-size: .84rem; font-weight: 400; color: #6b675f; }
.sk-wr__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sk-wr__aktion {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	flex-wrap: wrap;
	margin-top: 1.8rem;
	padding-top: 1.5rem;
	border-top: 1px solid #ece6dc;
}
.sk-wr__pflicht { margin: 0; font-size: .84rem; color: #6b675f; }
.sk-wr__btn {
	display: inline-block;
	padding: .9rem 1.8rem;
	border: 0;
	border-radius: 8px;
	background: var(--sk-ember);
	color: #fff;
	font-weight: 800;
	font-size: 1.02rem;
	cursor: pointer;
}
.sk-wr__btn:hover { filter: brightness(1.08); }

/* Rechtlicher Hinweis unter der Karte: zurueckhaltend, aber lesbar. */
.sk-wr__recht {
	margin: 1.4rem 0 0;
	font-size: .88rem;
	line-height: 1.6;
	color: #6b675f;
}

.sk-wr__err,
.sk-wr__ok { padding: 1rem 1.2rem; border-radius: 10px; margin: 0 0 1.4rem; }
.sk-wr__err { background: #fdeceb; border: 1px solid #e5a9a5; color: #8a2019; }
.sk-wr__ok { background: #edf7ed; border: 1px solid #a8cfa8; }
.sk-wr__ok h2 { margin: 0 0 .6rem; font-size: 1.3rem; }
.sk-wr__beleg {
	margin: 1rem 0;
	padding: .9rem 1rem;
	background: #fff;
	border: 1px solid #cdc6bb;
	border-radius: 8px;
	font-size: .86rem;
	line-height: 1.55;
	white-space: pre-wrap;
	overflow-x: auto;
}

@media (max-width: 600px) {
	/* Auf dem Handy braucht die Karte keinen eigenen Rahmen mehr - sie fuellt
	   ohnehin die Breite. Weniger Kanten, mehr Platz fuer die Felder. */
	.sk-wr { padding: 1.4rem 1.1rem 1.2rem; border-radius: 12px; }
	.sk-wr__aktion { flex-direction: column; align-items: stretch; gap: .8rem; }
	.sk-wr__btn { width: 100%; }
	.sk-wr__pflicht { text-align: center; }
	.sk-wr__feld--kurz input { max-width: none; }
}

/* ---------- Leerer Warenkorb: statt Sackgasse ein Angebot ----------
   Der Standardknopf "Zurueck zum Shop" weicht der Karte, sonst konkurrieren
   zwei Wege um dieselbe Entscheidung. */
body.sk-korb-leer-angebot .return-to-shop { display: none; }
body.sk-korb-leer-angebot .woocommerce-info,
body.sk-korb-leer-angebot .cart-empty { display: none; }

/* Die Seitenueberschrift laeuft sonst ueber die volle Breite und steht links
   neben dem Angebot. Nur im leeren Zustand auf dieselbe Spalte bringen - ist
   der Korb gefuellt, braucht die Tabelle die ganze Breite. */
body.sk-korb-leer-angebot .entry-header {
	max-width: 46rem;
	margin-inline: auto;
}

.sk-korbleer { max-width: 46rem; margin: 0 auto; }
.sk-korbleer__titel {
	margin: 0 0 .5rem;
	font-size: clamp(1.35rem, 3.4vw, 1.9rem);
	line-height: 1.2;
}
.sk-korbleer__lead {
	margin: 0 0 1.8rem;
	font-size: 1rem;
	line-height: 1.6;
	color: #6b675f;
}

.sk-korbleer__karte {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 1.6rem;
	align-items: start;
	background: #fff;
	border: 1px solid #e4ded4;
	border-radius: 14px;
	padding: 1.5rem;
	box-shadow: 0 10px 30px -22px rgba(0,0,0,.45);
}
.sk-korbleer__bildlink { display: block; }
.sk-korbleer__karte img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
}
.sk-korbleer__name { margin: 0 0 .4rem; font-size: 1.2rem; line-height: 1.25; }
.sk-korbleer__name a { color: inherit; text-decoration: none; }
.sk-korbleer__name a:hover { color: var(--sk-ember); }
.sk-korbleer__preis { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.sk-korbleer__preis .woocommerce-Price-amount { font-size: inherit; }
/* Grau #6b675f auf Weiss ergibt 6,0:1 und erfuellt damit AA. */
.sk-korbleer__preiszusatz {
	display: block;
	margin-top: .2rem;
	font-size: .84rem;
	font-weight: 400;
	color: #6b675f;
}
.sk-korbleer__vorteile {
	list-style: none;
	margin: 0 0 1.3rem;
	padding: 0;
	font-size: .92rem;
	line-height: 1.5;
}
.sk-korbleer__vorteile li { position: relative; padding-left: 1.5rem; margin-bottom: .4rem; }
.sk-korbleer__vorteile li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--sk-ember);
	font-weight: 800;
}

.sk-korbleer__form { display: flex; align-items: flex-end; gap: .8rem; flex-wrap: wrap; }
.sk-korbleer__mengenfeld { display: flex; flex-direction: column; gap: .3rem; }
.sk-korbleer__mengenfeld span { font-size: .84rem; font-weight: 700; }
.sk-korbleer__mengenfeld input {
	width: 6rem;
	padding: .72rem .6rem;
	border: 1px solid #cdc6bb;
	border-radius: 8px;
	font: inherit;
	text-align: center;
	background: #fff;
}
.sk-korbleer__mengenfeld input:focus { outline: 2px solid var(--sk-ember); outline-offset: 1px; }
.sk-korbleer__btn {
	flex: 1 1 12rem;
	padding: .9rem 1.6rem;
	border: 0;
	border-radius: 8px;
	background: var(--sk-ember);
	color: #fff;
	font-weight: 800;
	font-size: 1.02rem;
	cursor: pointer;
}
.sk-korbleer__btn:hover { filter: brightness(1.08); }

.sk-korbleer__aktion {
	display: block;
	margin-top: 1.2rem;
	padding: .9rem 1.2rem;
	border: 1px dashed #d8b48a;
	border-radius: 12px;
	background: #fdf6ec;
	text-align: center;
	font-size: .96rem;
	color: inherit;
	text-decoration: none;
}
.sk-korbleer__aktion:hover { background: #fbeedd; }

@media (max-width: 620px) {
	.sk-korbleer__karte { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.1rem; }
	.sk-korbleer__bildlink { max-width: 190px; margin-inline: auto; }
	/* Mengenfeld und Knopf bleiben nebeneinander - gestapelt wirkt der Knopf
	   wie eine Flaeche. Das Feld ist so breit, dass zwei Ziffern hineinpassen. */
	.sk-korbleer__form { flex-direction: row; align-items: flex-end; gap: .7rem; }
	.sk-korbleer__mengenfeld { flex: 0 0 5rem; }
	.sk-korbleer__mengenfeld input { width: 100%; }
	/* flex-basis wirkt in der Spaltenanordnung auf die Hoehe - deshalb hier
	   ausdruecklich auf die natuerliche Groesse zuruecksetzen. */
	.sk-korbleer__btn { flex: 1 1 auto; width: auto; padding-inline: 1rem; }
}

/* ---------- Kontoseite: Ueberschrift auf die Spalte der Formulare ----------
   Die Seitenueberschrift laeuft ueber die volle Inhaltsbreite und steht damit
   links neben den Kaesten. Beide Werte sind nicht geraten, sondern die, die die
   Seite selbst benutzt: .woocommerce ist 1120 px breit, #customer_login 880 px.
   Dadurch fluchtet der Titel in jeder Fensterbreite. */
body.woocommerce-account .entry-header {
	max-width: 1120px;
	margin-inline: auto;
}
body.woocommerce-account:not(.logged-in) .entry-header {
	max-width: 880px;
}

/* ---------- Startseite: Abschnitte als durchgehende Bloecke ----------
   Der Editor setzt zwischen die vollbreiten Gruppen einen Blockabstand von
   rund 26 px. Bei Abschnitten mit eigenem Hintergrund entsteht dadurch ein
   Streifen in der Seitenfarbe zwischen jedem Block - die Flaechen wirken
   zerrissen statt als abwechselnde Baender. Der Abstand gehoert nach innen
   (padding), nicht zwischen die Abschnitte. */
.sk-brand .entry-content > .sk-hero,
.sk-brand .entry-content > .sk-section {
	margin-block: 0;
}
/* Der leere Absatz, den der Editor am Ende stehen laesst, soll keinen
   Abstand unter dem letzten Abschnitt erzeugen. */
.sk-brand .entry-content > p:last-child:empty {
	display: none;
}

/* ---------- Mobil: MwSt-Hinweis in der Summenzeile ----------
   Gemessen an der Kasse bei 390 px: Der Hinweis braucht 132 px, die
   Betragsspalte ist nur 111 px breit - er lief rechts aus dem Rahmen.
   Drei aeltere Regeln (Zeilen 3832, 3868, 4562) haben schwaechere Fassungen
   ueberlagert, deshalb hier ausdruecklich mit !important.

   Loesung: Der Hinweis wird im td absolut positioniert. Damit ist er von der
   Spaltenbreite unabhaengig, fluchtet exakt mit dem Betrag darueber und kann
   die Zelle nicht mehr sprengen. Das td bekommt unten Platz dafuer. */
@media (max-width: 720px) {
	/* Die Auswahl muss "table.shop_table tfoot" enthalten: Die Regel weiter
	   oben ist damit spezifischer und hat den Innenabstand sonst gewonnen -
	   gemessen blieben 8 px statt der gesetzten 2,6 rem.
	   Der Innenabstand unten schafft den Platz fuer die Zeile darunter. Sie
	   haengt an bottom:0, waechst also mit der Zelle nach unten; ein
	   padding-top an der Zeile selbst wuerde den Abstand dagegen wieder
	   auffressen, weil die Zeile unten verankert ist. */
	body.sk-checkout #order_review table.shop_table tfoot tr.order-total td,
	.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
		position: relative !important;
		padding-bottom: 13px !important;
	}
	body.sk-checkout #order_review tr.order-total .includes_tax,
	.woocommerce-cart .cart_totals tr.order-total .includes_tax {
		position: absolute !important;
		right: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		display: block !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		font-size: .72rem !important;
		line-height: 1.3 !important;
		white-space: nowrap !important;
		text-align: right !important;
		overflow-wrap: normal !important;
	}
}

/* ---------- Aktionsleiste klebt oben, Kopfzeile darunter ----------
   Gemessen: Die Kopfzeile klebt bereits (sticky, top:0, z-index 50), die
   Aktionsleiste nicht (relative, z-index 100). Beide auf top:0 zu setzen
   wuerde die Kopfzeile verdecken, weil die Leiste hoeher liegt. Sie sind
   Geschwister im Dokument - die Leiste haengt direkt an <body>, die Kopfzeile
   steckt in #main-container -, also muss die Kopfzeile um die Hoehe der
   Leiste versetzt werden.

   Damit das auch ohne JavaScript sitzt, hat --sk-promo-h je Bildschirmbreite
   einen gemessenen Startwert: 94 px auf dem Handy (Text bricht dreizeilig),
   33 px ab Tablet. initPromoHoehe() in theme.js schreibt anschliessend den
   exakten Wert und haelt ihn per ResizeObserver aktuell. */
:root { --sk-promo-h: 94px; }
@media (min-width: 700px) { :root { --sk-promo-h: 33px; } }

/* Layout-Sprung beim Schriftwechsel verhindern.
   Gemessen am 30.08.2026 auf 412 px: Solange Inter noch laedt, rendert die
   Ersatzschrift schmaler und der Text der Aktionsleiste passt in EINE Zeile.
   Sobald Inter da ist, bricht er auf ZWEI um - die Leiste wuchs von 78 auf
   94 px und schob die gesamte Seite 16 px nach unten (#main-container
   y 78 -> 94). Das war der groesste Einzelposten beim Cumulative Layout Shift.
   Ab 480 px ist der Text ohnehin einzeilig, dort gilt die Reservierung nicht.
   Zeilenhoehe ist 1,25 (16,2 px bei 12,96 px), zwei Zeilen also 2.5em.
   Am Endzustand aendert das nichts - nur der Zustand davor entspricht jetzt
   schon dem danach. */
@media (max-width: 479px) {
	.sk-promo__text { min-height: 2.5em; }
}

.sk-brand .sk-promo {
	position: sticky;
	top: 0;
	z-index: 100;
}
/* Ohne !important bleibt top bei 0 - Blocksy setzt den Wert fuer seine
   klebende Kopfzeile mit staerkerem Gewicht. Gemessen. */
body.sk-brand #header.ct-header {
	top: var(--sk-promo-h) !important;
}
/* Ankersprünge duerfen nicht unter den beiden Leisten verschwinden. */
.sk-brand {
	scroll-padding-top: calc(var(--sk-promo-h) + 70px);
}

/* ---------- Registrierung in zwei Schritten ----------
   Die rechte Spalte auf /mein-konto/. Aufbau bewusst wie das Widerrufs- und
   das Warenkorb-Formular: eine Karte, klare Beschriftungen, Pflichtsterne in
   der Hausfarbe. */
.sk-reg h2 { margin: 0 0 .5rem; font-size: 1.3rem; }
.sk-reg__lead {
	margin: 0 0 1.4rem;
	font-size: .95rem;
	line-height: 1.6;
	color: #6b675f;
}
.sk-reg__zurueck { white-space: nowrap; }

.sk-reg__form {
	background: #fff;
	border: 1px solid #e4ded4;
	border-radius: 14px;
	padding: 1.6rem;
	box-shadow: 0 10px 30px -22px rgba(0,0,0,.45);
}
.sk-reg__feld { display: flex; flex-direction: column; margin: 0 0 1.1rem; }
.sk-reg__feld label { font-weight: 700; margin-bottom: .35rem; }
.sk-reg__feld input,
.sk-reg__feld select {
	width: 100%;
	padding: .72rem .85rem;
	border: 1px solid #cdc6bb;
	border-radius: 8px;
	font: inherit;
	background: #fff;
	transition: border-color .15s ease;
	/* Gemessen: Ohne diese Angaben erzwingt das Theme 40 px Hoehe, waehrend
	   Zeilenhoehe und Innenabstand zusammen 51,9 px brauchen - der Text der
	   Auswahlfelder wurde dadurch oben und unten abgeschnitten. */
	height: auto;
	min-height: 3rem;
	line-height: 1.4;
	box-sizing: border-box;
}
/* Eigener Pfeil, damit die Auswahlfelder wie die Textfelder aussehen. */
.sk-reg__feld select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.4rem;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b675f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .9rem center;
	background-size: .7rem auto;
}
.sk-reg__feld input:hover,
.sk-reg__feld select:hover { border-color: #a9a196; }
.sk-reg__feld input:focus,
.sk-reg__feld select:focus {
	border-color: var(--sk-ember);
	outline: 2px solid var(--sk-ember);
	outline-offset: 1px;
}
/* Zwei Felder nebeneinander - aber nur, wenn die Spalte breit genug ist.
   Feste Umbruchpunkte nach Fensterbreite gehen hier fehl: Die
   Registrierungsspalte ist am Rechner nur rund 374 px breit, dort standen die
   Paare trotzdem zweispaltig mit je 152 px und die Beschriftungen brachen um.
   auto-fit mit Mindestbreite entscheidet nach dem tatsaechlich vorhandenen
   Platz statt nach dem Fenster. */
.sk-reg__paar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0 1rem;
}
.sk-reg__feld--kurz { max-width: 100%; }
/* Beschriftungen sollen nicht mitten im Wort umbrechen. */
.sk-reg__feld label { line-height: 1.35; text-wrap: balance; }

.sk-reg__stern { color: var(--sk-ember); text-decoration: none; border: 0; font-weight: 700; }
/* Grau #6b675f auf Weiss ergibt 6,0:1 und erfuellt damit AA. */
.sk-reg__tipp,
.sk-reg__opt { font-size: .84rem; font-weight: 400; color: #6b675f; }
.sk-reg__tipp { margin-top: .3rem; }
.sk-reg__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sk-reg__recht {
	margin: 1.2rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid #ece6dc;
	font-size: .86rem;
	line-height: 1.55;
	color: #6b675f;
}
.sk-reg__aktion {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	flex-wrap: wrap;
	margin-top: 1.2rem;
}
.sk-reg__pflicht { margin: 0; font-size: .84rem; color: #6b675f; }
.sk-reg__btn {
	padding: .9rem 1.8rem;
	border: 0;
	border-radius: 8px;
	background: var(--sk-ember);
	color: #fff;
	font-weight: 800;
	font-size: 1.02rem;
	cursor: pointer;
}
.sk-reg__btn:hover { filter: brightness(1.08); }

.sk-reg__fehler {
	margin: 0 0 1.2rem;
	padding: .9rem 1.1rem;
	border: 1px solid #e5a9a5;
	border-radius: 10px;
	background: #fdeceb;
	color: #8a2019;
}
.sk-reg__fehler ul { margin: 0; padding-left: 1.1rem; }
.sk-reg__fehler li + li { margin-top: .35rem; }

/* ---------- Abzeichen im Konto ---------- */
.sk-reg-status {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	margin: 0 0 1.6rem;
	padding: .95rem 1.1rem;
	border-radius: 10px;
	font-size: .95rem;
	line-height: 1.55;
}
.sk-reg-status__icon { flex: 0 0 auto; line-height: 0; margin-top: .15rem; }
/* Gruen #1f7a34 auf #edf7ed ergibt 5,3:1 und erfuellt damit AA. */
.sk-reg-status--ok { background: #edf7ed; border: 1px solid #a8cfa8; color: #1f7a34; }
.sk-reg-status--ok strong { color: #17602a; }
/* Braun #7a5200 auf #fdf6e6 ergibt 6,1:1 und erfuellt damit AA. */
.sk-reg-status--offen { background: #fdf6e6; border: 1px solid #e3c98a; color: #7a5200; }
.sk-reg-status__form { margin: .6rem 0 0; }
.sk-reg-status__btn {
	padding: .5rem 1rem;
	border: 1px solid currentColor;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 700;
	font-size: .88rem;
	cursor: pointer;
}
.sk-reg-status__btn:hover { background: rgba(0,0,0,.06); }

@media (max-width: 600px) {
	.sk-reg__form { padding: 1.2rem 1.1rem; }
	/* Die Spaltenaufteilung regelt auto-fit oben von selbst. */
	.sk-reg__aktion { flex-direction: column; align-items: stretch; }
	.sk-reg__btn { width: 100%; }
	.sk-reg__pflicht { text-align: center; }
}

/* Beanstandete Felder kennzeichnen - die Meldung oben allein laesst den
   Kunden suchen, welches Feld gemeint ist. Rot #b32d2e auf Weiss ergibt
   5,9:1 und erfuellt damit AA. */
.sk-reg__feld input.is-fehler,
.sk-reg__feld select.is-fehler {
	border-color: #b32d2e;
	box-shadow: 0 0 0 3px rgba(179, 45, 46, .12);
}
.sk-reg__feld input.is-fehler:focus,
.sk-reg__feld select.is-fehler:focus {
	outline-color: #b32d2e;
}

/* Knopf waehrend des Absendens: sichtbarer Fortschritt, gleiche Breite,
   damit die Karte nicht springt. */
.sk-reg__btn.is-laeuft {
	position: relative;
	padding-left: 2.9rem;
	cursor: progress;
	filter: brightness(.94);
}
.sk-reg__btn.is-laeuft::before {
	content: "";
	position: absolute;
	left: 1.2rem;
	top: 50%;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: -.525rem;
	border: 2px solid rgba(255,255,255,.45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: sk-reg-dreh .7s linear infinite;
}
@keyframes sk-reg-dreh { to { transform: rotate(360deg); } }
/* Wer Bewegung reduziert haben moechte, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
	.sk-reg__btn.is-laeuft::before { animation: none; border-top-color: rgba(255,255,255,.9); }
}