/*
Theme Name:   osdigital.eu (Astra Child)
Template:     astra
Version:      3.0.0
*/

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
	--c-teal:#23C7A6; --c-green:#5BD98C; --c-violet:#7A6CF0; --c-coral:#E85D3B;
	--dark:#0B0D11; --dark-soft:#151920;
	--cream:#FBF7F2; --surface:#FFFFFF; --hairline:#ECE4D8;
	--text:#24211D; --muted:#7A756C; --mint:#1E9E86;
	--f-display:'Space Grotesk',-apple-system,sans-serif;
	--f-body:'Inter',-apple-system,sans-serif;
	--f-mono:'JetBrains Mono',monospace;
	--radius:16px; --radius-sm:10px;
	--shadow:0 2px 8px rgba(36,33,29,.05),0 12px 32px rgba(36,33,29,.06);
	--shadow-hover:0 6px 16px rgba(36,33,29,.08),0 20px 40px rgba(36,33,29,.09);
}

/* Body dunkel (der ganze Seitenkörper), damit keine cremeweißen Streifen
   zwischen den Sektionen durchscheinen. Hero + Produkte + Trust sind eh dunkel. */
body.os-home-page{ background:#0B0D11; color:var(--text); font-family:var(--f-body); overflow-x:hidden; }
/* CTA-Bereich (unten) braucht hellen Grund? Nein — CTA bekommt eigenen dunklen Look unten. */

/* Astra-Reste ausblenden (Titel, evtl. Header/Footer-Reste über dem Block) */
body.os-home-page .entry-title,
body.os-home-page .ast-single-post .entry-header{ display:none !important; }
body.os-home-page #content, body.os-home-page .site-content,
body.os-home-page #primary, body.os-home-page .ast-container{
	max-width:100% !important; padding:0 !important; margin:0 !important; background:transparent !important;
}

/* ==========================================================================
   TOP-BAR
   ========================================================================== */
.os-topbar{ position:fixed; top:0; left:0; right:0; z-index:100; padding:16px 40px; background:#0B0D11; border-bottom:1px solid rgba(255,255,255,.06); transition:padding .3s ease, box-shadow .3s ease; }
.os-topbar__in{ max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:24px; }
.os-topbar__logo{ height:46px; width:auto; display:block; }
.os-topbar__nav{ display:flex; gap:30px; margin-left:auto; }
.os-topbar__nav a{ color:#F4F1EA; text-decoration:none !important; font-weight:500; font-size:15px; opacity:.9; transition:.2s; }
.os-topbar__nav a:hover{ opacity:1; color:var(--c-green); }
.os-topbar__cart{ color:#F4F1EA; opacity:.9; display:flex; margin-left:24px; transition:.2s; }
.os-topbar__cart svg{ width:24px; height:24px; }
.os-topbar__cart:hover{ color:var(--c-green); opacity:1; }
body.os-scrolled .os-topbar{ box-shadow:0 8px 30px rgba(0,0,0,.35); padding:10px 40px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.os-hero{
	position:relative; min-height:88vh; display:flex; flex-direction:column;
	align-items:center; justify-content:center; text-align:center;
	padding:150px 24px 90px; overflow:hidden;
	background:radial-gradient(120% 120% at 50% 0%,#12241f 0%,var(--dark) 55%,var(--dark) 100%);
}
.os-hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.os-blob{ position:absolute; border-radius:50%; filter:blur(72px); opacity:.55; will-change:transform; }
.os-blob.b1{ width:46vw; height:640px; background:var(--c-teal); top:-160px; left:-8vw; animation:d1 18s ease-in-out infinite; }
.os-blob.b2{ width:42vw; height:560px; background:var(--c-violet); top:-80px; right:-8vw; animation:d2 22s ease-in-out infinite; }
.os-blob.b3{ width:40vw; height:520px; background:var(--c-green); bottom:-180px; left:26vw; animation:d3 20s ease-in-out infinite; }
.os-blob.b4{ width:28vw; height:360px; background:var(--c-coral); bottom:-120px; right:8vw; opacity:.28; animation:d1 26s ease-in-out infinite reverse; }
@keyframes d1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(80px,60px) scale(1.12)}66%{transform:translate(-40px,90px) scale(.95)}}
@keyframes d2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-70px,80px) scale(1.08)}66%{transform:translate(50px,40px) scale(1.05)}}
@keyframes d3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-50px) scale(1.1)}66%{transform:translate(-80px,-30px) scale(.92)}}
.os-hero__veil{ position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse at 50% 40%,transparent 0%,rgba(11,13,17,.35) 60%,rgba(11,13,17,.85) 100%); }
.os-hero__in{ position:relative; z-index:3; max-width:860px; }
.os-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--c-teal); background:rgba(35,199,166,.1); border:1px solid rgba(35,199,166,.25); padding:7px 16px; border-radius:999px; margin-bottom:26px; }
.os-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--c-green); box-shadow:0 0 0 3px rgba(91,217,140,.25); }
.os-hero__title{ font-family:var(--f-display); font-weight:600; color:#F4F1EA; font-size:clamp(40px,7vw,80px); line-height:1.03; letter-spacing:-.03em; margin:0 0 22px; }
.os-grad{ background:linear-gradient(105deg,var(--c-teal),var(--c-green) 40%,var(--c-violet)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.os-hero__sub{ font-size:clamp(16px,2vw,20px); line-height:1.6; color:#A8AEBA; max-width:560px; margin:0 auto 40px; }
.os-hero__ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.os-btn{ display:inline-flex; align-items:center; gap:9px; padding:16px 32px; border-radius:12px; font-family:var(--f-body); font-weight:600; font-size:16px; text-decoration:none !important; cursor:pointer; transition:.18s; }
.os-btn.primary{ background:linear-gradient(135deg,var(--c-teal),var(--c-green)); color:#062018; box-shadow:0 8px 30px rgba(35,199,166,.35); }
.os-btn.primary:hover{ transform:translateY(-2px); box-shadow:0 12px 38px rgba(35,199,166,.45); }
.os-btn.ghost{ background:rgba(255,255,255,.06); color:#F4F1EA; border:1px solid rgba(255,255,255,.14); }
.os-btn.ghost:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px); }
.os-hero__scroll{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:3; color:#A8AEBA; font-size:11px; letter-spacing:.14em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.7; }
.os-hero__scroll span{ width:1px; height:32px; background:linear-gradient(var(--c-teal),transparent); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ==========================================================================
   TRUST-BAR
   ========================================================================== */
.os-trust{ display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:center; padding:16px 24px; background:var(--surface); border-bottom:1px solid var(--hairline); }
.os-trust__i{ display:flex; align-items:center; gap:9px; color:var(--text); font-size:13.5px; font-weight:500; }
.os-trust__i svg{ width:17px; height:17px; color:var(--c-teal); }

/* ==========================================================================
   SECTION + PRODUCTS
   ========================================================================== */
.os-section{ max-width:1200px; margin:0 auto; padding:56px 24px; }
.os-section__head{ margin-bottom:32px; }
.os-section__eyebrow{ font-family:var(--f-body); font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--c-teal); display:block; margin-bottom:6px; text-transform:uppercase; }
.os-section__title{ font-family:var(--f-display); font-size:28px; font-weight:600; color:var(--text); margin:0; }

.os-products{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:1024px){ .os-products{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .os-products{ grid-template-columns:1fr; } }
.os-card{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:.2s; }
.os-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:linear-gradient(90deg,var(--c-teal),var(--c-green) 45%,var(--c-violet)); opacity:0; transition:.2s; }
.os-card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-4px); }
.os-card:hover::before{ opacity:1; }
.os-card__media{ position:relative; aspect-ratio:4/3; background:radial-gradient(circle at 50% 30%,rgba(35,199,166,.08),rgba(122,108,240,.06) 70%,transparent),#FFF3EE; display:flex; align-items:center; justify-content:center; }
.os-card__media svg{ width:54px; height:54px; color:var(--c-teal); opacity:.55; }
.os-card__badge{ position:absolute; top:12px; left:12px; z-index:3; background:linear-gradient(135deg,var(--c-teal),var(--c-green)); color:#062018; font-weight:700; font-size:11.5px; padding:4px 11px; border-radius:999px; }
.os-card__body{ display:flex; flex-direction:column; flex:1; padding:20px; }
.os-card__title{ font-family:var(--f-display); font-weight:600; font-size:16px; color:var(--text); margin:0 0 4px; }
.os-card__edition{ font-size:13px; color:var(--muted); margin:0 0 12px; }
.os-card__stock{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--mint); margin:0 0 16px; }
.os-card__dot{ width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 3px rgba(30,158,134,.16); }
.os-card__pricing{ display:flex; align-items:baseline; gap:10px; margin-top:auto; margin-bottom:16px; }
.os-card__old{ font-family:var(--f-mono); font-size:14px; color:var(--muted); text-decoration:line-through; }
.os-card__price{ font-family:var(--f-display); font-weight:700; font-size:24px; background:linear-gradient(105deg,#1AA588,#3F9E6A 55%,#6A5FE0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.os-card__btn{ display:block; text-align:center; background:linear-gradient(135deg,var(--c-teal),var(--c-green)); color:#062018 !important; text-decoration:none; font-weight:700; font-size:14.5px; padding:12px 16px; border-radius:var(--radius-sm); box-shadow:0 4px 14px rgba(35,199,166,.28); transition:.18s; }
.os-card__btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }

/* ==========================================================================
   CTA
   ========================================================================== */
.os-cta{ max-width:1080px; margin:24px auto 80px; padding:44px 40px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; backdrop-filter:blur(10px); }
.os-cta__title{ font-family:var(--f-display); font-size:20px; font-weight:600; color:#F4F1EA; margin:0 0 4px; }
.os-cta__text{ font-size:13.5px; color:#A8AEBA; margin:0; }
.os-cta__btn{ display:inline-flex; background:linear-gradient(135deg,var(--c-teal),var(--c-green)); color:#062018; text-decoration:none; font-weight:600; padding:13px 24px; border-radius:var(--radius-sm); }

@media(prefers-reduced-motion:reduce){ .os-blob,.os-hero__scroll span{ animation:none !important; } }
@media(max-width:768px){ .os-topbar__nav{ display:none; } .os-topbar__logo{ height:38px; } .os-hero{ padding-top:110px; min-height:80vh; } }

/* ==========================================================================
   KATEGORIE-FILTER + SUCHE
   ========================================================================== */
.os-filter{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-start; margin-bottom:28px; }
.os-filter__pills{ display:flex; gap:8px; flex-wrap:wrap; }
.os-filter__pill{
	background:var(--surface); border:1px solid var(--hairline); color:var(--text);
	font-family:var(--f-body); font-weight:600; font-size:14px;
	padding:9px 18px; border-radius:999px; cursor:pointer; transition:.18s;
}
.os-filter__pill:hover{ border-color:var(--c-teal); }
.os-filter__pill.is-active{
	background:linear-gradient(135deg,var(--c-teal),var(--c-green));
	color:#062018; border-color:transparent;
}
/* Suche jetzt in Pill-Optik, direkt neben den Kategorien (nicht abgesetzt) */
.os-filter__search{
	min-width:180px; max-width:240px;
	background:var(--surface); border:1px solid var(--hairline); border-radius:999px;
	padding:9px 18px; font-family:var(--f-body); font-size:14px; color:var(--text);
	outline:none; transition:.18s;
}
.os-filter__search:focus{ border-color:var(--c-teal); box-shadow:0 0 0 3px rgba(35,199,166,.15); }
@media(max-width:640px){ .os-filter__search{ max-width:none; width:100%; } }

/* ==========================================================================
   SPICEPAY PRODUKTE — moderne Glass-Optik (gegen die ECHTEN SpicePay-Klassen)
   Der Produktbereich bekommt einen dunklen Hintergrund + driftende Blobs
   (wie der Hero), damit die Glass-Karten davor richtig wirken.
   ========================================================================== */

/* Produktbereich (die os-section, die den SpicePay-Grid enthält) dunkel + Blobs */
.os-section:has(.spicepay-grid){
	position:relative;
	background:radial-gradient(130% 100% at 50% 0%, #14261f 0%, var(--dark) 60%);
	max-width:100%;
	margin:0;
	padding:64px 24px 80px;
	overflow:hidden;
}
/* driftende Farbblobs im Produktbereich */
.os-section:has(.spicepay-grid)::before,
.os-section:has(.spicepay-grid)::after{
	content:""; position:absolute; border-radius:50%; filter:blur(90px); z-index:0; pointer-events:none;
}
.os-section:has(.spicepay-grid)::before{ width:40vw; height:460px; background:var(--c-teal); opacity:.20; top:-120px; left:-6vw; }
.os-section:has(.spicepay-grid)::after{ width:38vw; height:440px; background:var(--c-violet); opacity:.18; bottom:-140px; right:-6vw; }
/* Inhalt über die Blobs heben */
.os-section:has(.spicepay-grid) > *{ position:relative; z-index:1; max-width:1200px; margin-left:auto; margin-right:auto; }

/* Überschrift + Filter im dunklen Bereich hell */
.os-section:has(.spicepay-grid) .os-section__title{ color:#F4F1EA; }
.os-section:has(.spicepay-grid) .os-section__eyebrow{ color:var(--c-teal); }

/* Filter-Pills: Glass auf dunkel */
.os-section:has(.spicepay-grid) .os-filter__pill{
	background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#F4F1EA;
	backdrop-filter:blur(8px);
}
.os-section:has(.spicepay-grid) .os-filter__pill:hover{ border-color:var(--c-teal); }
.os-section:has(.spicepay-grid) .os-filter__pill.is-active{
	background:linear-gradient(135deg,var(--c-teal),var(--c-green)); color:#062018; border-color:transparent;
}
/* Suchleiste: Pill-Optik wie die Kategorien, dunkel */
.os-section:has(.spicepay-grid) .os-filter__search{
	background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#F4F1EA;
	backdrop-filter:blur(8px); border-radius:999px;
	min-width:180px; max-width:240px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23A8AEBA' stroke-width='1.8'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:16px center; padding-left:40px;
}
.os-section:has(.spicepay-grid) .os-filter__search::placeholder{ color:#A8AEBA; }
.os-section:has(.spicepay-grid) .os-filter__search:focus{ border-color:var(--c-teal); box-shadow:0 0 0 3px rgba(35,199,166,.18); }

/* ===== Das Grid ===== */
.spicepay-grid{
	display:grid !important;
	grid-template-columns:repeat(var(--cols,3),1fr) !important;
	gap:22px !important;
}
@media(max-width:1024px){ .spicepay-grid{ grid-template-columns:repeat(2,1fr) !important; } }
@media(max-width:560px){ .spicepay-grid{ grid-template-columns:1fr !important; } }

/* ===== Glass-Produktkarte ===== */
.spicepay-product{
	position:relative; display:flex; flex-direction:column; overflow:hidden;
	background:rgba(255,255,255,.07) !important;
	border:1px solid rgba(255,255,255,.12) !important;
	border-radius:18px !important;
	backdrop-filter:blur(16px) saturate(1.2);
	-webkit-backdrop-filter:blur(16px) saturate(1.2);
	box-shadow:0 10px 40px rgba(0,0,0,.28);
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Gradient-Leuchtstreifen oben, beim Hover sichtbar */
.spicepay-product::before{
	content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
	background:linear-gradient(90deg,var(--c-teal),var(--c-green) 45%,var(--c-violet));
	opacity:0; transition:opacity .2s ease;
}
.spicepay-product:hover{
	transform:translateY(-5px);
	border-color:rgba(35,199,166,.4) !important;
	box-shadow:0 18px 50px rgba(0,0,0,.4), 0 0 40px rgba(35,199,166,.12);
}
.spicepay-product:hover::before{ opacity:1; }

/* Produktbild — dunkel/transparent, KEIN cremiger Rand */
.spicepay-product-image{
	background:rgba(255,255,255,.04) !important;
	padding:0 !important; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.spicepay-product-image img{ width:100%; height:100%; object-fit:cover; }

/* Textbereich */
.spicepay-product-body{ padding:20px; display:flex; flex-direction:column; flex:1; }
.spicepay-product-name{
	font-family:var(--f-display) !important; font-weight:600 !important; font-size:17px !important;
	color:#F4F1EA !important; margin:0 0 14px !important;
}
.spicepay-product-row{
	display:flex !important; align-items:center; justify-content:space-between; gap:12px;
	margin-top:auto; flex-wrap:wrap;
}
/* Preis im Gradient */
.spicepay-product-price{
	font-family:var(--f-display) !important; font-weight:700 !important; font-size:22px !important;
	background:linear-gradient(105deg,var(--c-teal),var(--c-green) 45%,var(--c-violet));
	-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
/* ADD TO CART: Türkis→Grün-Gradient statt Braun */
.spicepay-buy-button, .spicepay-add-to-cart{
	background:linear-gradient(135deg,var(--c-teal),var(--c-green)) !important;
	color:#062018 !important;
	border:none !important; border-radius:10px !important;
	font-family:var(--f-body) !important; font-weight:700 !important;
	padding:11px 20px !important; letter-spacing:.01em;
	box-shadow:0 4px 16px rgba(35,199,166,.3);
	transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.spicepay-buy-button:hover, .spicepay-add-to-cart:hover{
	transform:translateY(-1px); filter:brightness(1.05);
	box-shadow:0 8px 22px rgba(35,199,166,.4);
}

/* ==========================================================================
   DETAILS-BUTTON + MODAL (Beschreibung wie bei GoPremium)
   ========================================================================== */
.os-details-btn{
	background:rgba(255,255,255,.08); color:#F4F1EA;
	border:1px solid rgba(255,255,255,.18); border-radius:10px;
	font-family:var(--f-body); font-weight:600; font-size:14px;
	padding:11px 18px; cursor:pointer; transition:.15s; margin-right:10px;
}
.os-details-btn:hover{ border-color:var(--c-teal); background:rgba(255,255,255,.14); }

.os-modal{ position:fixed; inset:0; z-index:9999; display:none; }
.os-modal[aria-hidden="false"]{ display:block; }
.os-modal__backdrop{ position:absolute; inset:0; background:rgba(6,10,14,.72); backdrop-filter:blur(6px); }
.os-modal__panel{
	position:relative; max-width:520px; margin:10vh auto 0; z-index:1;
	background:var(--surface); border:1px solid var(--hairline);
	border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.4);
	padding:32px; animation:osModalIn .2s ease;
}
@keyframes osModalIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.os-modal__close{
	position:absolute; top:16px; right:18px; background:none; border:none;
	font-size:28px; line-height:1; color:var(--muted); cursor:pointer; transition:.15s;
}
.os-modal__close:hover{ color:var(--text); }
.os-modal__title{ font-family:var(--f-display); font-weight:600; font-size:22px; color:var(--text); margin:0 0 16px; padding-right:30px; }
.os-modal__body{ color:var(--muted); font-size:15px; line-height:1.6; }
.os-modal__body p{ margin:0 0 12px; }
.os-modal__body strong{ color:var(--text); }
.os-modal__feats{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; }
.os-modal__feats li{ position:relative; padding-left:26px; color:var(--text); font-size:14.5px; }
.os-modal__feats li::before{
	content:"✓"; position:absolute; left:0; top:0;
	color:var(--mint); font-weight:700;
}

/* ==========================================================================
   FEINSCHLIFF — Trust-Bar dunkel einfügen + Preis seriös (kein Gradient)
   ========================================================================== */
/* Trust-Bar dunkel, lückenlos (kein weißer Streifen drüber/drunter) */
.os-trust{
	background:#0B0D11 !important;
	border-bottom:1px solid rgba(255,255,255,.06) !important;
	border-top:1px solid rgba(255,255,255,.06) !important;
	margin:0 !important;
}
.os-trust__i{ color:#F4F1EA !important; }
.os-trust__i svg{ color:var(--c-green) !important; }

/* Preis schlicht grün statt Gradient (seriöser) */
.spicepay-product-price{
	background:none !important;
	-webkit-text-fill-color:initial !important;
	color:#5BD98C !important;
	font-family:var(--f-display) !important; font-weight:700 !important; font-size:22px !important;
}

/* CTA-Bereich: dunkler Grund drumrum (kein heller Streifen mehr) */
body.os-home-page .os-cta{ position:relative; }
/* Der Bereich, in dem der CTA liegt, ist der dunkle Body — passt jetzt. */

/* Punkt neben dem Hero-Eyebrow entfernen (war overused) */
.os-eyebrow .dot{ display:none !important; }
.os-eyebrow{ gap:0 !important; }

/* ==========================================================================
   SCROLL-REVEAL — Elemente gleiten/faden beim Reinscrollen sanft rein
   ========================================================================== */
.os-reveal{
	opacity:0;
	transform:translateY(28px);
	transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
	will-change:opacity, transform;
}
.os-reveal.is-in{ opacity:1; transform:none; }

/* Gestaffeltes Erscheinen der Produktkarten (eine nach der anderen) */
.spicepay-product{ opacity:0; transform:translateY(30px) scale(.98); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.spicepay-product.is-in{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
	.os-reveal, .spicepay-product{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ==========================================================================
   PARALLAX-BLOB-HINTERGRUND (fest hinter der ganzen Seite)
   Bewegt sich beim Scrollen in verschiedenen Geschwindigkeiten = Tiefe.
   ========================================================================== */
.os-bg-layer{
	position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.os-bg-blob{
	position:absolute; border-radius:50%; filter:blur(90px); will-change:transform;
}
.os-bg-blob.p1{ width:44vw; height:44vw; background:var(--c-teal);   opacity:.16; top:2vh;  left:-8vw; }
.os-bg-blob.p2{ width:40vw; height:40vw; background:var(--c-violet); opacity:.15; top:35vh; right:-10vw; }
.os-bg-blob.p3{ width:38vw; height:38vw; background:var(--c-green);  opacity:.13; top:75vh; left:20vw; }
.os-bg-blob.p4{ width:30vw; height:30vw; background:var(--c-coral);  opacity:.08; top:120vh; right:12vw; }

/* Inhalt über den Hintergrund heben */
body.os-home-page .entry-content,
body.os-home-page .os-hero,
body.os-home-page .os-trust,
body.os-home-page .os-section,
body.os-home-page .os-topbar,
body.os-home-page .os-cta{ position:relative; z-index:1; }

/* Damit die Blobs durchscheinen: Sektionen, die vorher voll dunkel waren,
   leicht transluzent machen (nur wo es Sinn ergibt) */
.os-section:has(.spicepay-grid){
	background:linear-gradient(180deg, rgba(11,13,17,.72), rgba(11,13,17,.86)) !important;
}
.os-hero{
	background:linear-gradient(180deg, rgba(18,36,31,.6) 0%, rgba(11,13,17,.78) 60%, rgba(11,13,17,.9) 100%) !important;
}

@media(prefers-reduced-motion:reduce){
	.os-bg-blob{ transition:none !important; }
}

/* ==========================================================================
   FIXES — Top-Bar-Abstand + Footer dunkel
   ========================================================================== */
/* Top-Bar bündig, keine Lücke durch den fixed Hintergrund-Layer */
body.os-home-page .os-topbar{ margin:0 !important; top:0 !important; }
body.os-home-page .os-hero{ margin-top:0 !important; }

/* Astra-Footer dunkel (der weiße Bereich ganz unten) */
.os-home-page .site-footer,
.os-home-page footer#colophon,
.os-home-page .ast-small-footer,
.os-home-page .footer-widget-area,
.os-home-page .ast-builder-footer-row-container,
.os-home-page .site-below-footer-wrap,
.os-home-page .site-primary-footer-wrap{
	background:#0B0D11 !important;
	color:#A8AEBA !important;
	border-color:rgba(255,255,255,.06) !important;
}
.os-home-page .site-footer a,
.os-home-page footer#colophon a{ color:#F4F1EA !important; }
.os-home-page .site-footer a:hover{ color:var(--c-green) !important; }
/* Social-Icons im Footer hell */
.os-home-page footer .ast-builder-social-element a,
.os-home-page footer .social-icon a{ color:#A8AEBA !important; }
.os-home-page footer .ast-builder-social-element a:hover{ color:var(--c-green) !important; }

/* ==========================================================================
   LEERE WP-ABSÄTZE — die die Top-Bar nach unten schoben — ausblenden
   ========================================================================== */
body.os-home-page .entry-content > p:empty,
body.os-home-page .entry-content > p:blank{ display:none !important; margin:0 !important; height:0 !important; }
/* Sicherheitsnetz: p, das nur Whitespace enthält, direkt vor/nach unseren Elementen */
body.os-home-page .entry-content > p{ margin:0; }

/* ==========================================================================
   LEEREN ASTRA-HEADER (#masthead) ausblenden — DAS ist die Luft oben.
   Unsere eigene .os-topbar ersetzt ihn komplett.
   ========================================================================== */
body.os-home-page #masthead,
body.os-home-page .site-header,
body.os-home-page header.site-header{
	display:none !important;
	height:0 !important;
	min-height:0 !important;
}
/* Content-Container oben ohne Abstand, da eigener fixed-Header */
body.os-home-page #content,
body.os-home-page .site-content,
body.os-home-page #primary,
body.os-home-page #primary.content-area{ margin:0 !important; padding:0 !important; }

/* ==========================================================================
   SUCHE nach links zwingen (stand noch rechts) + Abstand-Fix final
   ========================================================================== */
.os-filter{ justify-content:flex-start !important; }
.os-filter__search{ margin-left:0 !important; order:2; }
.os-filter__pills{ order:1; }